Archief - CSS: 100% height hack

Iedereen kent wel het probleem met 100% hoge div's over je webpagina.
Ik was er mee aan het prullen en heb (hopelijk) iets gevonden.

Ik weet niet of deze hack al bestaat, maar imo werkt hij wel. Mogelijke bugs mogen altijd gereporteerd worden. Enkel getest in IE6 en Mozilla.

De 'Hack':



En voila, je kunt de div perfect laten opvullen.
Je zet de height van je body op 100% zodat de inliggende div dit ook kan aannemen.
De !important zorgt ervoor dat enkel Mozilla deze waarde neemt.
De min-height kan ook enkel Mozilla aan.
Moest het een nutteloze thread zijn, de vuilbak er mee in.

`SeriOUs zei:

Code:

body {
	height: 100%;
}

#bigDiv {
	height: auto !important;
	height: 100%;
	min-height: 100%;
}

Klik om te vergroten...

Gewoon
werkt hier ook hoor.

Kijk dan eens als je tekst in die div je window overlapt, zodat je moet gaan scrollen?
In Mozilla zal hij (de background ed) stoppen. Voor Mozilla (en terecht) is height de absolute height van het element.

Uw hack lost mijn probleem op. In mozilla stopte mijn div altijd
zodra ik moest scroll, enkel het zichtbare deel vulde hij dus op.
Nu vult hij dus alles op, in IE6 merk ik ook helemaal geen probleem,
en het lijkt geen verdere invloed te hebben op mijn andere markup.

Geen idee of hij al bestaat, maar het lost wel mijn vervelend probleem
op, chapeau als je het hebt gevonden!

XML zijn werkwijze is wat ik voordien gebruikte, en zo vult hij
in mozilla enkel het zichtbare deel op.

Inderdaad, dat had ik nog niet gecontroleerd.

Goed werk.!

kun je ergens een demo page online zetten, want ofwel doe ik iets verkeerd, ofwel werkt het enkel in IE6 bij mij, FF en Opera doen het niet (beide latest versions)

hoe dan ook het height issue van divs is op zich zo geen probleem, maar als je eenmaal met floats bezig bent, en je moet 2 gefloate column gelijk laten uitrekken zodat ze allebei evenlang zijn als de hoogste, dan heb je pas een issue om u tegen te zeggen :'(
Ik heb een oplossing gevonden voor mijn probleem, maar er zouden veel issues van de baan zijn als IE min-height zou ondersteunen.

Of als floated divs de hoogte van het parent element mee zouden doen uitrekken