Ik zit al een tijdje met het volgende probleem en heb het overal op internet proberen te zoeken maar kan net niet vinden hoe het moet. Het gaat om het volgende:
Een 100% width header met een 100% sticky footer. Daartussen moet een centered content met een height van 100%. Ik krijg het niet voor mekaar om de centered content een hoogte te geven van de header tot aan de footer. Hoe moet dit??
Het leuke is ook dat dit niet kan. In CSS3 (de nieuwste BETA versie van CSS) heeft een calc functie. Daarin zal je dan dit kunnen doen:
#content
{
height: calc(100% - 140px - 100px);
}
Ervan uitgaande dat de header 140px en de footer 100px hoog is.
Alleen deze calc functie werkt nog maar in 1 browser. Het enige wat je dus kunt doen is een truc gebruiken.
En die truc is door de achtergrond van de body de achtergrond van de content mee te geven. Doordat de header en footer over de body achtergrond schuiven zal het lijken alsof het de achtergrond van de content is.
Je kunt ook gewoon je content div (dus de div met rode rand) tussen <center></center> zetten. Dan centreert hij ook alles netjes in het midden.
Voorbeeldje.
<body>
<div id="header"></div>
<center>
<div id="content">
<h1>Ik ben een kop</h1>
<p>Ik ben een paragraaf</p>
</div>
</center>
<div id="footer"></div>
</body>
