Een div met 100% height

Geïnspireerd door http://www.tutwow.com/tips/quick-tip-css-100-height (is het dan tóch mogelijk?!) zie je hier het resultaat: een div met 100% hoogte. De oplossing is: geef met CSS aan de elementen html en body een height van 100% en geef de div een min-height van 100% en je bent er! Dus, de CSS wordt:

html {
	height: 100%;
}
body {
	height: 100%;
	margin: 0 20px;
	padding: 0;
	font: 100%/120% Arial, Verdana, sans-serif;
}
#content {
	min-height: 100%;
	background: #CC3;
	padding: 0 20px;
	margin: auto;
	width: 774px;
	border: 2px solid #09F;
}

De tutWOW-site geeft aan dat je ook aan het html- en body-element een min-height moet geven. Geen idee waarom het voor hun wel schijnt te werken, bij mij werkt niet. En stel je geeft aan de div een height in plaats van een min-height, dan wordt ie zo hoog als het venster en blijkt eventuele inhoud die niet in het venster past, na het scrollen onder de div te uit te steken.

Verklaring is:

Overigens, ideaal is het nog steeds niet. De parent moet altijd height:100% hebben en geen min-height. Dus zowel een child als een grandchild 100% hoogte maken geeft problemen. Meerdere kolommen naast elkaar met een min-height: 100% geeft ook problemen als de ene kolom meer inhoud heeft dan de andere, want zodra je gaat scrollen blijkt de hoogte van de kortere kolom toch niet de100% te zijn de jij voor ogen had. Dus slechts geschikt voor eenvoudige layouts!

Werkt in: Firefox, Safari, Chrome, IE., Werkt niet in: Opera, IE6

WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen