Come forzare il div figlio ad essere il 100% dell'altezza del div genitore senza specificare l'altezza del genitore?

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?

TylerH
Domanda modificata 3º gennaio 2019 в 8:20
Programmazione
html css
13º luglio 2009 в 10:14
11 visualizzazioni
Soluzione

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.

csvan
Risposta modificata 17º luglio 2017 в 11:06
Commentari (2)

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

David Thomas
Risposta modificata 13º luglio 2009 в 10:30
Commentari (4)

[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 :)

Jonathan Julian
Risposta modificata 5º agosto 2013 в 5:07
Commentari (2)