Een gecentreerde div met 100% height

Geïnspireerd door http://www.tutwow.com/tips/quick-tip-css-100-height zie je hier het resultaat: een gecentreerde 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:

• Geef de gele div een min-height:100%. Die is dan minimaal 100% de hoogte van de parent (in dit geval de body). En die is zo hoog als zijn inhoud (de gele div). Dat schiet dus niet op.
• Geef de body daarom ook een height:100%. Die hoogte is 100% van zíjn parent, het element html. Nu is het zo dat die ook zo hoog als zijn inhoud (in dit geval de body).
• Het element html is de redding, als je die ook een height:100% geeft, wordt die zo hoog als het browservenster.
• Doordat je een min-height hebt gegeven aan de gele div, rekt deze ook mee met zijn inhoud. Dat betekent dat als er meer inhoud is, deze langer wordt dan de hoogte van het browservenster. Met alleen height zou de div precies zo hoog worden als de height aangeeft, dus de hoogte van het browservenster.

Overigens, ideaal is het nog steeds niet:

• De parent van het element met de 100% hoogte, moet altijd height:100% hebben (dus geen min-height). Een ingesloten div met 100% hoogte in de gele div, lukt dus niet.
• Meerdere kolommen naast elkaar met een min-height: 100% geeft ook problemen als de ene kolom meer inhoud heeft dan de andere. Zodra je gaat scrollen blijkt de hoogte van de kortere kolom toch slechts 100% hoogte van het browservenster te zijn of de hoogte van zijn inhoud (als dat meer is dan de browservensterhoogte). Dus de kolommen kijken nooit naar de lengte van hun broertje of zusje om daarna hun hoogte aan de langste kolom aan te passen.

Kortom, deze ene gele div 100% hoogte geven is zover het gaat, eventueel volgende divs met 100% hoogte geven problemen.

Zie ook voorbeeld van een absoluut gepositioneerde div met 100% height

Werkt in de moderne versies van Firefox, Safari, Chrome, IE en Opera.

WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen