CSS Layout Help - Stretch div au bas de la page

Question

J'essaie de créer une mise en page avec une zone 'en-tête' qui contient un logo et quelques liens, puis une zone de contenu qui doit s'étendre jusqu'au bas de la page . C'est là que je suis coincé.

J'ai entouré l'en-tête et le contenu avec un div conteneur qui a une hauteur de 100%, cela fonctionne très bien. Mais je ne peux pas alors obtenir le div contenu pour étirer vers le bas du conteneur div comme lui donnant une hauteur minimale de 100% semble prendre la hauteur du corps de la page, donc je me retrouve avec une barre de défilement en raison de l'espace repris en haut de la page par l'en-tête.

est ici un wireframe ce qui en fait, espérons-ce que je suis en train de réaliser un peu plus clair ...

Voici un exemple CSS rapide, cela fonctionne, en plus d'être toujours là à une barre de défilement qui semble être la hauteur de la zone d'en-tête ...

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    color: #fff; 
} 
body { 
    background-color: #000; 
} 
#container { 
    position: relative; 
    margin: 0 auto; 
    width: 1000px; 
    min-height: 100%; 
} 
#header { 
    padding-top: 26px; 
} 
#logo { 
    width: 194px; 
    height: 55px; 
    margin: 0 auto; 
    background-color: #fff; 
} 
#content { 
    margin-top: 10px; 
    position: absolute; 
    width: 1000px; 
    min-height: 100%; 
    background-color: #fff; 
} 

Answer 1

Définissez la position du conteneur div: relative et la position du contenu div: absolue. Ensuite, donnez le contenu div haut: < hauteur de l'en-tête > et en bas: 0

Pas en mesure de tester cela maintenant, mais je pense que quelque chose comme ça devrait fonctionner.

Answer 2

http://jsfiddle.net/CZayc/

cela fonctionne en enveloppant la tête et le corps dans un div pour pousser le pied vers le bas

index.html

<div id="wrap"> 
    <div id="header"> 
     header 
    </div> 
    <div id="main"> 
     main<br/>main<br/>main<br/>main<br/>main<br/>main<br/> 
    </div> 
</div> 
<div id="footer"> 
    footer 
</div> 

style.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 
#header { 
    border-top:20px solid #fff; 
    height: 33px; 
    line-height: 33px; 
    text-align: center; 
    background-color: green; 
} 
html { height: 100%; } 
body { height: 100%; width: 90%; margin: auto; } 
#wrap { min-height: 100%;background-color:gray;} 
#main { 
    overflow: auto; 
    padding-bottom: 53px; /* must be same height as the footer */ 
    background-color: red; 
    height: 90% 
} 
#footer { 
    position: relative; 
    margin-top: -53px; /* negative value of footer height */ 
    height: 33px; 
    line-height: 33px; 
    border-bottom:20px solid #fff; 
    text-align: center; 
    background-color:blue; 
} 

Answer 3

limitations: hauteur de l'en-tête doit être statique, avec un a hauteur bsolute.

La hauteur du contenu est dynamique.

code CSS:

* { 
    padding:0; 
    margin:0; 
} 
html, body { 
    height: 100%; 
    color: #fff; 
} 
#header { 
    background: red; 
    position: absolute; 
    z-index:20; 
    height: 7em; 
    overflow:hidden; 
    width:100%; 
} 
#content { 
    background: blue; 
    position: absolute; 
    top: 0; 
    padding-top: 7em; 
    min-height: 100%; 
    box-sizing: border-box; 
} 

contenu étirer tout le chemin vers le bas, même lorsque le texte est court.

lorsque le texte de contenu est plus long que notre hauteur de la fenêtre - nous obtenons le défilement automatique

Exemple: http://jsfiddle.net/fixit/p3B4s/3/