CSS: altezza- riempire il resto del div?

Question

mi chiedo se questo è possibile con css semplice o se devo usare javascript per questo?

Ho una barra laterale sul mio sito web. un semplice div # sidbar normalmente è alto circa 1024px, ma l'altezza cambia dinamicamente a causa del suo contenuto.

quindi cerchiamo di imaginge il seguente caso:

<div id="sidebar"> 
    <div class="widget"></div> //has a height of 100px 
    <div class="widget"></div> //has a height of 100px 
    <div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar 
</div> 

Voglio che il div # resto per riempire il resto della barra laterale fino a raggiungere il fondo del div # barra laterale.

questo è possibile con puro css?

Answer 1

Ciò che si vuole è qualcosa di simile, ma 100% - 200px CSS non supporta le espressioni come queste. IE ha una funzione "espressioni" non standard, ma se vuoi che la tua pagina funzioni su tutti i browser, non riesco a vedere un modo per farlo senza JavaScript. In alternativa, puoi utilizzare tutte le altezze percentuali di div s, in modo che tu possa avere qualcosa come il 10% -10% -80%.

Aggiornamento: Ecco una soluzione semplice che utilizza JavaScript. Ogni volta che il contenuto delle modifiche della barra laterale, basta chiamare questa funzione:

function resize() { 
    // 200 is the total height of the other 2 divs 
    var height = document.getElementById('sidebar').offsetHeight - 200; 
    document.getElementById('rest').style.height = height + 'px'; 
}; 

Answer 2

Prova

height: 100%; 

o

height: auto; 

Answer 3

Se si conosce l'altezza esatta del #widget (100px nel tuo caso), è possibile evitare l'uso di JavaScript utilizzando il posizionamento assoluto:

#sidebar 
{ 
height: 100%; 
width: ...; 
position: relative; 
} 

.widget 
{ 
height: 100px; 
} 

#rest 
{ 
position: absolute; 
left: 0; 
width: 100%; 
top: 200px; 
bottom: 0; 
} 

Answer 4

puoi farlo con tag div nidificati. ne hai uno che specifica la larghezza a sinistra e quindi un altro a sinistra. Per riempire il resto dell'altro lato, annidi un div relativo al 100% all'interno del div laterale destro. in questo modo:

<div style="width:100%"> 
    <div style="width:300px;background-color:#FFFF00;float:left"> 
    </div> 
    <div style="margin-left:300px"> 
    <div style="position:relative;left:0px;width:100%;background-color:#00FFFF"> 
    </div> 
    </div> 
</div> 

Answer 5

mi sono imbattuto in questa domanda mentre alla ricerca di una risposta a una domanda simile, e ho pensato di illustrare calc. A partire da questo post, calc non è ancora supportato cross-browser; tuttavia, è possibile controllare this link here per verificare se i browser di destinazione sono supportati. Ho modificato il caso ipotetico di Matt per utilizzare calc in an example on jsFiddle. Essenzialmente è una soluzione CSS pura che fa ciò che Casablanca propone nella sua risposta. Ad esempio, se un browser supporta calc, allora sarebbe valido height: calc(100% - 200px); e per proprietà simili.

Answer 6

propongo la tabella-elemento in alternativa:

• +: pulito CSS
• +: evitando javascript
• -: tavolo semanticamente abusato
• -: non gli Div-elementi richiesti