Comment créer div pour remplir tout l'espace entre l'en-tête et le pied de page div

Question

Je suis en train de passer de l'utilisation de tableaux à des fins de mise en page à l'utilisation de divs (oui, oui, le grand débat). J'ai 3 divs, un en-tête, le contenu et le pied de page. L’en-tête et le pied de page ont une taille de 50 pixels chacun. Comment faire en sorte que la division de bas de page reste en bas de la page et la division de contenu pour remplir l'espace entre les deux? Je ne veux pas coder en dur la hauteur des divisions du contenu car la résolution de l'écran peut changer.

Answer 1

Pour résumer (et cela provient du lien CSS Sticky Footer fourni par Traingamer), voici ce que j’ai utilisé:

 html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>
 

Answer 2

Pour développer la réponse de Mitchel Sellers, attribuez à votre contenu une hauteur de div de 100%, ainsi qu'une marge automatique.

Pour une explication complète et un exemple, voir CSS Sticky Footer de Ryan Fait.

Puisque vous connaissez la taille (hauteur) de votre en-tête, placez-le à l'intérieur de la div content (ou utilisez des marges).

Position absolute vous posera des problèmes si votre contenu est plus grand (plus haut) que la fenêtre.

Answer 3

si vous essayez de maximiser la hauteur de votre contenu div, dans le CSS ajouter

hauteur: 100%;

Answer 4

#footer {
 clear: both;
}