Ako vynútiť, aby výška podriadeného divu bola 100 % výšky rodičovského divu bez zadania výšky rodičovského divu?

Mám stránku s nasledujúcou štruktúrou:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Navigácia je na ľavej strane a div s obsahom je na pravej strane. Informácie pre obsahový div sa načítavajú cez PHP, takže sú zakaždým iné.

Ako môžem vertikálne škálovať navigáciu tak, aby jej výška bola rovnaká ako výška divu s obsahom bez ohľadu na to, ktorá stránka je načítaná?

TylerH
Edited question 3 január 2019 в 8:20
Programovanie
html css
13 júl 2009 в 10:14
40 zobrazenia
Riešenie

POZNÁMKA: Táto odpoveď sa vzťahuje na staršie prehliadače bez podpory štandardu Flexbox. Moderný prístup nájdete na adrese: https://stackoverflow.com/a/23300532/1155721

Odporúčam vám pozrieť si článok Equal Height Columns with Cross-Browser CSS and No Hacks.

V podstate urobiť to pomocou CSS spôsobom kompatibilným s prehliadačmi nie je triviálne (ale triviálne s tabuľkami), takže si nájdite vhodné predpripravené riešenie.

Odpoveď sa tiež líši podľa toho, či chcete 100 % výšku alebo rovnakú výšku. Zvyčajne je to rovnaká výška. Ak je to 100 % výška, odpoveď je trochu iná.

csvan
Edited answer 17 júl 2017 в 11:06
Komentáre (2)

Ak vám nevadí, že navigačný div bude v prípade neočakávane krátkeho obsahu orezaný, existuje aspoň jeden jednoduchý spôsob:

#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 */
}

V opačnom prípade existuje faux-columns technika.

David Thomas
Edited answer 13 júl 2009 в 10:30
Komentáre (4)

[Odvolávajúc sa na Dmityho kód Less v inej odpovedi] Hádam, že je to nejaký druh "pseudokódu"?

Z toho, čo som pochopil, skúste použiť techniku falošných stĺpcov, ktorá by mala urobiť trik.

http://www.alistapart.com/articles/fauxcolumns/

Dúfam, že to pomôže :)

Jonathan Julian
Edited answer 5 august 2013 в 5:07
Komentáre (2)