html, body{
height:100%;
padding:0;
margin:0;
}
div.fullheight{
height:100%; /* For IE6 */
min-height:100%; /* For andre browsere */
}
Til de nysgerrige vil jeg dog gerne kigge på de grundlæggende regler om højde og bredde, der gør at dette virker som det gør.
Box-modellen
Første skridt på vejen til fuld forståelse af højde og bredde i browsere kommer med forståelse af box-modellen. Box-modellen opstiller regler for bredde, padding, margin og borders for et block-element.
http://webvaerk.dk/wp-content/uploads/2010/05/Screen-shot-2010-05-24-at-08.00.59.png
Box-modellen illustrerer at et block-level element fylder ligeså meget som:
margin+padding+borders+width = bredde
margin+padding+borders+height = højden
Sættes et elements bredde derfor til 300px og padding til 10px (på hver side) vil elementet fylde 320px i bredden.
Procentvis bredde og højde
Et andet vigtigt punkt er hvordan procentvise bredder og højder opfører sig. Procenterne henviser ikke til siden, som man måske kunne tro, men henviser til bredden/højden på det omsluttende element. Dvs. har det omsluttende element height=300px, så vil height=50% være 150px.
Det omsluttende element er det "nærmeste" block-element der omslutter elementet.
<html>
<body>
<div>
<p>...</p>
</div>
</body>
</html>
Således er p-taggets omsluttende element div-elementet. Dettes omsluttende element er body-elementet, osv.
Fuld bredde
Block-elementer vil helt automatisk fylde ligeså meget i bredden, som det element der omslutter den. Således gælder:
<em>margin+padding+borders+width = omsluttende elements width</em>
Det betyder at block-element der er omsluttet af body, automatisk vil fylde hele body-elementets width. Dvs. ønsker du et element skal fylde hele browserens bredde, skal margin, padding og border på body elementet sættes til 0.
body {
margin:0;
padding:0;
}
Fuld højde
Højde opfører sig anderledes end bredde. Hvor bredde automatisk tilpasser sig til sit omsluttende element, tilpasser højde sig til elementets eget indhold. Således er et block-element aldrig højere end sit indhold, medmindre andet er angivet.
Html-elementet vil således aldrig være højere end body-elementet. Body-elementet vil ikke være højere end indholdet på siden. Det er derfor du ikke kan sætte et elements højde til 100%, ved at skrive height:100%, fordi du på denne måde sætter højden på elementet til det samme som body's højde.
Løsningen er derfor først at sikre at html-elementer fylder hele højden af browseren. Dette gøres således:
html {
height:100%;
}
Dette vil virke, da html-elementets omsluttende element fylder hele højden af browseren. Derefter kan body-elementet sættes til samme højde:
body {
height:100%;
}
Dermed er body-elementet ligeså højt som browseren, og vi kan nu give vores block-elementer fuld højde.
div.fullheight {
height:100%;
}
Det eneste vi nu mangler at tage højde for, er situationen, hvor indholdet i div.fullheight fylder så meget at elementet ikke er højt nok. I dette tilfælde ønskes det at en scrollbar vises.
Dette løses med CSS-attributten min-height. Min-height definerer som navnet antyder en mindste-højde. Dvs fylder indholdet mere end min-height, vokser boksen bare. Min-height overskriver desuden height, hvis denne er sat.
Men ak, min-height virker ikke i IE6, men vi er heldige. Height virker nemlig i IE6, fuldstændig som min-height virker i andre browsere. Så løsningen på alle vores kvaler er således:
html, body{
height:100%;
padding:0;
margin:0;
}
div.fullheight{
height:100%; /* For IE6 */
min-height:100%; /* For andre browsere */
}
Og på denne måde endte vi ved starten.
Demo
Du kan prøve det hele i denne demo
