CSS Comment obtenir la hauteur entre l'en-tête et le pied de page?

Question

J'ai un site qui a toujours une hauteur de 100%. L'en-tête et le pied de page ont toujours une hauteur fixe. Tout d'abord un peu de code:

CSS

#header { height: 50px; } 
#footer { position: absolute; bottom: 0px; height: 20px; } 

HTML

<!-- in the body tag --> 
<div id="header">Header</div> 
<div id="content-Left"></div> 
<div id="content-Right"></div> 
<div id="footer"></div> 

EDIT: Comme vous pouvez le voir, j'ai une teneur en div (gauche et droite) entre tête et pied de page. Je veux que ces divs remplissent tout l'espace entre l'en-tête et le pied de page. La div content-left doit toujours afficher une bordure droite de l'en-tête au pied de page. Comment puis-je faire ceci?

Answer 1

je suggère de le résoudre comme ça:

#header { 
     position: fixed; 
     top: 0px; 
     left: 0px; 
     width: 100%; 
     height: 50px; 
     } 

#footer { 
     position: fixed; 
     bottom: 0px; 
     left: 0px; 
     width: 100%; 
     height: 20px; 
     } 

#content-Left { 
     position: fixed; 
     top: 50px; /* Close to the Header */ 
     bottom: 20px; /* Scales the Div down upon the Footer */ 
     left: 0px; /* Position it to the left */ 
     width: 50%; 
     overflow: auto; /* Makes the Content scrollable if its required */ 
     border-right: 1px solid #000000; 
     /* Border as required - just change size,type and color as you want */ 
     } 

#content-Right { 
     position: fixed; 
     top: 50px; /* Close to the Header */ 
     right: 0px; /* Position it to the right */ 
     bottom: 20px; /* Scales the Div down upon the Footer */ 
     width: 50%; 
     overflow: auto; /* Makes the Content scrollable if its required */ 
     } 

Answer 2

Pied de page fixe, sans javascript, non?

Enveloppez tout dans <div id="container"></div>. Dans votre CSS:

*, body {margin: 0; padding: 0;} 
#container {display: block; position: absolute; min-height: 100%;} 
#content-Left {border-right: 1px solid #000; } 
#footer {position: absolute; display: block; bottom: 0; height: 3em } 

Si vous avez déjà un stylesheet IE6, ajoutez ceci:

body, #container {height: 100%;} 

Sinon, créez un ou ajouter d'autre cela à la tête de vos documents HTML:

<!--[if lt IE 7]> <style>body, #container {height: 100%;}</style> <![endif]--> 

Devrait faire l'affaire.