Ho un sito con la seguente struttura:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
La navigazione è a sinistra e il div del contenuto è a destra. Le informazioni per il div del contenuto sono tirate dentro attraverso PHP, quindi è diverso ogni volta.
Come posso scalare la navigazione verticalmente in modo che la sua altezza sia uguale a quella del content div, indipendentemente dalla pagina caricata?
NOTA: Questa risposta è applicabile ai browser legacy senza supporto per lo standard Flexbox. Per un approccio moderno, vedere: https://stackoverflow.com/a/23300532/1155721
Ti suggerisco di dare un'occhiata a Colonne di uguale altezza con CSS cross-browser e nessun hack.
Fondamentalmente, fare questo con i CSS in un modo compatibile con i browser non è banale (ma banale con le tabelle) quindi cercate una soluzione preconfezionata appropriata.
Inoltre, la risposta varia a seconda che tu voglia un'altezza del 100% o un'altezza uguale. Di solito è altezza uguale. Se è il 100% di altezza la risposta è leggermente diversa.
Se non vi dispiace che il div di navigazione venga tagliato nel caso di un div di contenuto inaspettatamente corto, c'è almeno un modo semplice:
#main {
position: relative;
}
#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}
#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}
Altrimenti c'è il <a href="http://www.alistapart.com/articles/fauxcolumns/" title="Link to A List Apart'articolo sul concetto di 'faux-columns.'""faux-columns tecnica.
[Facendo riferimento al codice Less di Dmity in un'altra risposta, immagino che questo sia una specie di "pseudo-codice"?
Da quello che ho capito prova ad usare la tecnica delle finte colonne che dovrebbe fare il trucco.
http://www.alistapart.com/articles/fauxcolumns/
Spero che questo aiuti :)