Jeg har et nettsted med følgende struktur:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Navigasjonen er til venstre og innholdsdelen er til høyre. Informasjonen til innholdsdelen hentes inn via PHP, så den er forskjellig hver gang.
Hvordan kan jeg skalere navigasjonen vertikalt slik at høyden er den samme som høyden på innholdsdelen, uansett hvilken side som lastes inn?
MERKNAD: Dette svaret gjelder for eldre nettlesere uten støtte for Flexbox-standarden. For en moderne tilnærming, se: https://stackoverflow.com/a/23300532/1155721
Jeg foreslår at du tar en titt på Like høye kolonner med CSS på tvers av nettlesere og ingen hacks.
I utgangspunktet er det ikke trivielt å gjøre dette med CSS på en nettleserkompatibel måte (men trivielt med tabeller), så finn deg en passende ferdigpakket løsning.
Svaret varierer også avhengig av om du vil ha 100 % høyde eller lik høyde. Vanligvis er det lik høyde. Hvis det er 100 % høyde, er svaret litt annerledes.
Hvis du ikke har noe imot at navigasjonsdiv'en blir klippet i tilfelle en uventet kort innholdsdiv, finnes det i det minste én enkel måte å gjøre det på:
#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 */
}
Ellers er det faux-columns teknikken.
[Refererer til Dmity's Less-kode i et annet svar] Jeg antar at dette er en slags "pseudokode"?
Fra hva jeg forstår, prøv å bruke faux-columns-teknikken som skal gjøre susen.
http://www.alistapart.com/articles/fauxcolumns/
Håper dette hjelper :)