Möchte man eine Seite von der Höhe so aufteilen, dass der Header eine feste Höhe aufweist und der Hauptteil den Rest einnimmt, also genau bis zum unteren Rand des Viewports reicht, so hat man in CSS3 zwei relativ einfache Möglichkeiten dies zu realisieren: entweder mithilfe von calc() oder mithilfe von box-sizing.
Das HTML innerhalb von <body> schaut hierbei folgendermaßen aus:
<body>
<header></header>
<div id="main"></div>
</body>
In beiden Fällen ist es wichtig, dass die Elternelemente html und body eine Höhe von 100% zugewiesen bekommen, und dass die Außen- und Innen-Abstände (margin und padding) auf 0 gesetzt sind.
Mithilfe von calc() lässt sich für div#main eine Höhe nun einfach errechnen:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
header {
width: 100%;
height: 80px;
background-color: red;
}
div#main {
width: 100%;
height: calc(100% - 80px);
background-color: green;
}
Etwas anders verfährt man bei der Methode mit box-sizing:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
header {
position: absolute;
width: 100%;
height: 80px;
background-color: red;
}
div#main {
box-sizing: border-box;
padding-top: 80px;
width: 100%;
height: 100%;
background-color: green;
}
Mit „box-sizing: border-box;“ wird erreicht, dass bei der Höhe von div#main dessen Innenabstand (padding) und Rahmen (border) mit enthalten sind. Wenn man den Header mittels „position: absolute“ aus dem Seitenfluss herausnimmt, legt sich dieser quasi über den oberen Innenabstand von div#main.
Die zweite Methode ist etwas umständlicher, hat dafür eine etwas größere Browser-Unterstützung