[CSS] DIV-vullende ipv scherm-vullende hoogte

[ekkoper]

Hallo,

Voor mijn website zou ik graag DIV's gebruiken. Ik heb echter een probleem; het gaat om het volgende.

De website bestaat uit een container DIV met een breedte van ongeveer 500px in het midden van het venster.
Deze DIV moet helemaal van boven naar beneden lopen wat lukt met "height: 100%". Daarnaast wil ik in deze DIV drie DIV's. De eerste heeft een vaste hoogte en zit bovenaan helemaal over de breedte van de container-DIV. De tweede heeft een variabele hoogte en zit verticaal gezien in het midden. De derde heeft weer een vaste hoogte en zit helemaal onderaan.

Nu wil ik dat wanneer de inhoud van de pagina zeer klein is (in ieder geval niet zo lang dat er gescrolld moet worden), dat de container toch de gehele hoogte van het venster in beslag neemt en dat de tweede DIV dit ook doet (minus de hoogte van de eerste en de derde DIV), zodat de derde DIV in dit geval helemaal onderaan het venster staat en er niet van af valt.

Dit lukt me echter niet met "height: 100%" in de tweede DIV. Deze krijgt dan de hoogte van het venster en niet van de overige ruimte binnen de container.

Heeft iemand een idee?

Groeten,
Eduard

[Verwijderd]

ekkoper schreef op woensdag 18 februari 2009 @ 17:31:
[ ... ]Dit lukt me echter niet met "height: 100%" in de tweede DIV. Deze krijgt dan de hoogte van het venster en niet van de overige ruimte binnen de container.[ ... ]

@Eduard: Percentage(s) zijn altijd relatief ten opzichte van hun 'parent' element. In jou geval zou je zelfs een niveau 'hoger' moeten. Heb je de html-tag en body ook gedefineerd in je CSS?

Voorbeeld: (Eric Meyer, methode)

Cascading Stylesheet: postitioning.css

html, body {
height:100%;
}
#header {
margin: 0 auto;
width: 500px;
height: 68px;
}
#content {
margin: 0 auto;
width: 99%;
min-height: 100%;
}
#footer {
margin: 0 auto;
width: 500px;
height: 48px;
}

Succes!

[Da Weef]

Wat ik kan destilleren uit OP is dat er wordt gevraagd om een lay-out met fixed-header en fixed footer die stretcht tot 100% hoogte ook wanneer content hiertoe niet toereikend is.

Echter wat ik mis is wat je wilt zodra de content meer dan toereikend is. Wil je dan nog steeds een hoogte van 100% met scrollbar in DIV 2, of wil je dat de container groeit tot buiten de viewport?

Overigens zijn er voor beide gevallen meer dan voldoende oplossingen beschikbaar, kijk eens naar:
http://ryanfait.com/sticky-footer/
http://www.bosmonster.nl/html/centered_with_footer.html
http://www.cssplay.co.uk/layouts/