CSSを使用して動的にコンテナの高さを更新

Question

3つのセルで構成されるレイアウトを実装したいと思います。

固定ヘッダ（位置：固定された）、

B左側のメニュー、

Cメイン容器。

高さが固定されたAとB。

Cは残りのスペース（残りの高さのみ）を埋めます。 CSSを使用して、この結果をどのように達成できますか？

Cセクションの高さが本体/ウィンドウの高さよりも小さい場合にのみ問題が発生します。

linkには、この結果を得る方法の例があります。しかし、1つの列がある場合にのみ機能します。

http://jsfiddle.net/hqCcx/3/

Answer 1

[OK]を最終的に私は解決策を見つけた...

トリックは100％

そしてよりであることを最も外側の要素の高さを設定することで、100％の高さを作るための一般的なルールを設定することですコンテンツのコンテナの最小高さ。

html, body {height: 100%} 

#content {min-height: 100%} 

これはlinkです。

Answer 2

あなたは、CSSがブラウザウィンドウを満たしていないとして、 'C' をリサイズするためにJavaScriptを使用してに頼る必要があります。

Answer 3

純粋なCSSでもっとも近いものは、Cオブジェクトのmin-heightです。すべてのブラウザがこれをサポートしているわけではないので、「近い」と言います。これは見積もりとなり、Cオブジェクトの下に何かを置くと、設定した最小の高さを表示できるだけの高さでなければ、スクロールせずにブラウザに表示されないことがあります。

また、パーセンテージ値のmin-heightは何もしないので、jsfiddleの例で必要な結果が得られないのはなぜですか。あなたは300pxまたは何かのようなパーセント以外の値を使用する必要があります。実際にはそれを示すjsfiddleがあります。余分なTest<br />行のコメントを外して、コンテンツの高さが最小の高さよりも高い場合にどうなるかを確認します。

もう1つの方法は、ページが読み込まれたときにJavaScriptにジャンプしてCの高さを動的に設定することですが、これはブラウザ間のソリューションに関しては面倒です。