フレキシブルなヘッダー、スクロール可能なボディーとフッターのHTML

Question

ヘッダー、コンテンツ、およびフッターセクションが垂直にレイアウトされた単純なHTMLレイアウトを作成しようとしています。

ヘッダーとフッターの高さは、内容によって決まります。

コンテンツセクションの高さは残りの高さである必要があります。したがって、レイアウト全体がウィンドウの高さ全体を使用します。コンテンツセクションはスクロール可能です。

ので、順番に：

1. ヘッダー。高さはコンテンツの高さに依存します。スクロールバーはありません。
2. コンテンツ。高さは残りの部分です。 window_height - （header_height + footer_height）です。必要に応じてスクロールバー（オーバーフロー：自動;）
3. フッター。高さはコンテンツの高さに依存します。スクロールバーはありません。

静的なヘッダーとフッターの高さの例はたくさんありますが、コンテンツベースの高さに対応できるものは何も見つかりませんでした。

私は絶対位置/相対位置/固定位置のプレーンdivを試しました。私はいくつかの設定でdisplay：table/table-row/table-cellを使ってdivを試しました。私は実際のものを使ってみました。しかし、これらのどれもうまくいかないようです。 http://jsbin.com/uveloj/15/edit

スクリプトを作成せずにこれを行うにはどうすればいいですか（可能な場合は常にJSに頼らないことをお勧めします）。

Answer 1

JavaScriptを使用しない場合、これは可能ではないと思います。あなたが望む中間のスクロールを得るために、コンテンツ領域は、設定された高さを持たなければなりません。ヘッダーとフッターが動的に変更できる場合は、JavaScriptを使用せずにスクロールできるようにコンテンツ領域の高さを更新する方法はありません。しかし、JSのいくつかの行を書くだけなら、これはかなりシンプルなレイアウトです。

http://jsfiddle.net/rogerblanton/8ctJJ/

フレームを使用すべきでない：私はあなたのための良い例があります。

Answer 2

フレームの使用について考えましたか？

Answer 3

私はずっと後でこのスレッドに出会いましたが、それは有用であることがわかりました。

私はあなたが助けるためにjQueryのouterHeight（）関数を使用することができます一般的なケースでは、あなたがなど、アカウントのマージン、ボーダー、を考慮する必要があることがわかった：

$(window).resize(function() { 
    var windowHeight = $(window).height(); 
    var headerHeight = $('div#header').outerHeight(true) 
    var footerHeight = $('div#footer').outerHeight(true); 

    var contentHeight = windowHeight - (footerHeight + headerHeight); 
    var contentMargins = $('div#content').outerHeight(true) - $('div#content').height(); 
    var contentInnerHeight = contentHeight - contentMargins; 

    $('div#content').height(contentInnerHeight); 
}).resize(); 

コンテンツの高さを固定jsのほかに、本当に重要なのは、コンテンツのオーバーフロースタイルをスクロールまたは自動にすることだけです。

はここでロジャーのフィドルの変形例です：

http://jsfiddle.net/nuAmG/1/