html - 高さ固定のコンテナ div、高さ可変のコンテンツ div

Question

次のようなhtmlコードがあります。

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

div#container の高さは固定です (例: 800px)。div#footer と div#header のサイズは最初はわかりません (Javascript で設定します)。

div#content が残りの高さの 100% を占めるようにします。

CSSを使用して行うことはできますか？

Answer 1

このタイプの機能では、display：tableを使用できます。このように書いてください：

.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;}

これをチェックしてくださいhttp://jsfiddle.net/Rvbk4/

注：IE8以降まで動作します。

Answer 2

（あなたが書いたように）フッターの高さを設定できないので、これを
試してください：

#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%;
}

と jsfiddle: http://jsfiddle.net/AJtxy/1/

Answer 3

JavaScript で他の div の高さを設定している場合は、jquery を使用してウィンドウの高さを取得し、他の 2 つの div の高さを差し引くと、正しい量が残ります...これは、アイデア http://api.jquery.com/height/