conteneur hauteur fixe div, contenu flexible de la hauteur div

Question

J'ai un code html comme ceci:

<div id="container"> 
<div id="header"> 
</div> 
<div id="content"> 
</div> 
<div id="footer"> 
</div> 

div # hauteur du conteneur est fixé (par exemple 800px). La taille de div # footer et div # header n'est pas connue au début (à définir via Javascript).

Je souhaite que le contenu div # occupe 100% de la hauteur restante.

Peut-il être fait en utilisant CSS?

Answer 1

Pour ce type de fonctionnalité, vous pouvez utiliser l'affichage : tableau pour cela. Ecrire comme ceci:

.container{ 
    display:table; 
    height:800px; 
    width:100%; 
} 
.container > div{ 
    display:table-row; 
} 
.header{background:red; height:100px;} 

.content{background:blue} 

.footer{background:green; height:100px;} 

Cocher cette http://jsfiddle.net/Rvbk4/

Note: il est le travail jusqu'à ce IE8 & ci-dessus.

Answer 2

Puisque vous ne pouvez pas régler la hauteur de pied de page (comme vous avez écrit)
essayez ceci:

#container{ 
    background : red; 
    height:800px; 
    min-height:800px 
} 
#header{ 
    background : blue; 
} 
#content{ 
    background : yellow; 
    height:100% 
} 
#footer{ 
    background : green; 
    //position:absolute; 
    position:fixed; 
    bottom:0; 
    width:100%; 
} 

et jsFiddle: http://jsfiddle.net/AJtxy/1/

Answer 3

Si vous réglez la hauteur des autres divs avec javascript, vous pouvez utiliser jquery pour obtenir la hauteur de la fenêtre, soustraire les hauteurs des 2 autres divs et voila, il vous reste la quantité correcte ... Ceci devrait vous aider à vous donner une idée http://api.jquery.com/height/