html - ヘッダーが動的な場合に中央の div コンテンツがオーバーフローしない

Question

縦に並んだ 3 つの div (ヘッダー、コンテンツ、フッター) があります。

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

このような：

ここに画像の説明を入力

jsfiddle の例でわかるように、すべての要件を満たすことはできません。ウィンドウのサイズを変更しても、フッター div のコンテンツが折りたたまれません。いくつかの微調整を行うと、これを達成できますが、overflow:scroll が機能せず、スクロールバーが表示されません

これを解決しようとした別の方法を次に示します(成功しません:S): http://jsfiddle.net/rv4XS/31/

これを解決するための最善の方法がいずれかであるかどうかはわかりません。最初または2番目のjsfiddleをチェックして、どちらが最適かを確認してください

ヘッダーに動的コンテンツがあり、同時にコンテンツがオーバーフローしたときにスクロールバーを表示するシナリオで、全高のコンテンツを実現するにはどうすればよいですか?

助けてくれてありがとう。

score 0 · Accepted Answer

さて、私はついにjavascriptを使用してこれを達成しました。

アイデアは単純です。ヘッダーの高さは、何があっても設定する必要があります。

このため、理由はわかりませんが（おそらく、このdivがajaxで呼び出されたため）、jquery .height（）メソッドは機能しませんでしたが、clientHeightメソッドを使用するとうまく機能しました。

var header = document.getElementById('headerDiv');

if(header)
{
    $('contentDiv').css('top', header.clientHeight);
}

1 に答える 1