Se ho un contenitore con larghezza del 75% e due colonne all'interno, a sinistra ea destra, con una larghezza di 10em a sinistra, come posso ottenere il contenitore giusto per occupare il 100% dello spazio rimanente?Come faccio a fare un div flottante a sinistra occupando il 100% dello spazio rimanente?

ho provato questo senza fortuna:

html, body { 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#container { 
 
    position:relative; 
 
    width:75%; 
 
    margin:0 auto; 
 
    background:blue; 
 
} 
 
#left-container { 
 
    position:relative; 
 
    float:left; 
 
    height:100%; 
 
    width:10em; 
 
    background:red; 
 
} 
 
#right-container { 
 
    position:relative; 
 
    float:left; 
 
    height:100%; 
 
    width:100%; 
 
    background:yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

posso farlo facilmente con percentuali, ma ho bisogno di essere lasciato una larghezza 10em fissa.

fonte

2013-05-01 Michael N

È possibile effettuare un elemento di dialogo occupa il resto dello spazio rimuovendo float: left, rimuovendo il width e aggiungendo overflow:hidden al destradiv

Working example

#right-container { 
    position:relative; 
    overflow: hidden; 
    height:100%; 
    background:yellow; 
}

fonte

2013-05-01 01:20:01

Oh, wow, che era molto più semplice di quanto ho pensato che sarebbe stato. Non ci avrei mai pensato. Grazie! –

@MichaelN Prego, ricordo di aver avuto questo problema quando ho iniziato e mi ci sono voluti * ore * prima che me ne accorgessi. È un bel trucco, non dimenticarlo :) –

Questo lavoro su Firefox ma non su Chrome, bro. La mia versione di Chrome è 51. Grazie per la tua risposta comunque, sto cercando questo numero – Ben

Un'altra opzione è quella di mettere un margine sinistro sul div #right-container:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 
#container { 
    position:relative; 
    width:75%; 
    margin:0 auto; 
    background:blue; 
} 
#left-container { 
    position:relative; 
    float:left; 
    height:100%; 
    width:10em; 
    background:red; 
} 
#right-container { 
    position:relative; 
    margin-left: 11em; 
    height:100%; 
    background:yellow; 
} 
</style> 

</head> 
<body> 

<div id="container"> 
    <div id="left-container"> 
     Left 
    </div> 
    <div id="right-container"> 
     Right 
    </div> 
</div> 

</body> 
</html>

fonte

2013-05-01 01:50:06

Mi piacerebbe aggiungere in un'altra opzione, come di seguito:

#header-left-section { 
    float: left; 
    position: absolute; 
    z-index: 1000; 
} 
#header-right-section { 
    height: 90px; 
    width:100%; 
    position: relative; 
    overflow: hidden; 
} 
#header-right-section ins, 
#header-right-section div{float:right}

Il div sinistra appena prendo abbastanza spazio per la sua roba dentro. La parte destra prende il 100% della larghezza e la parte sinistra rimane sopra solo a sinistra (di z-index). L'ultima linea di CSS è solo per fare cose interiori se il div di destra è flottante a destra.

fonte

2016-06-12 03:22:22 Ben

Ci sono almeno 2 opzioni per questo tipo di problema in questo momento (2016) utilizzando CSS3, soluzioni molto più semplice la risposta accettata, che è una specie di "hack" utilizzando overflow:hidden

utilizzando flexbox

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: blue; 
 
    display: flex 
 
} 
 
#left-container { 
 
    height: 100%; 
 
    width: 10em; 
 
    background: red; 
 
} 
 
#right-container { 
 
    height: 100%; 
 
    flex:1; 
 
    background: yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

utilizzando calc()

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: blue; 
 
} 
 
#left-container { 
 
    float: left; 
 
    height: 100%; 
 
    width: 10em; 
 
    background: red; 
 
} 
 
#right-container { 
 
    float: left; 
 
    height: 100%; 
 
    width: calc(100% - 10em); 
 
    background: yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

fonte

2016-06-12 03:37:21 dippas

Come faccio a fare un div flottante a sinistra occupando il 100% dello spazio rimanente?

risposta

Working example

Problemi correlati