スケーラブルなdivとstickyヘッダーとフッター

Question

私はヘッダーとフッターの下にスクロールし、正しいナビゲーションを修正するために、内部のメインコンテンツで固定ヘッダーとフッターを実装しようとしています。私はこれに近い得ることができます

http://jsfiddle.net/sjUBQ/

唯一の方法は、このhttp://jsfiddle.net/sjUBQ/の試みですが、私は300ピクセル#main .yui3-U-3-5 {背景に高さを修正する必要があります。#aaa;高さ300px;オーバーフロー：オート;}スクロールバーを取得します。

私はjQueryのコードを追加してみました：

$(document).ready(function() { 
    var desiredHeight = $("body").height() - $("head").height() - $("footer").height(); 
    $(".yui3-u-3-5").css("min-height", desiredHeight); 
});​ 

が、これは動作しませんでしたので、内容が実際のブラウザウィンドウ、その後も高い場合にどのように私は、スクロールバーを示す、内側のdivでスティッキーヘッダーとフッターを得るのですか？

Answer 1

あなたはこのようなやり方をしていますか？ http://jsfiddle.net/RiderSargent/sjUBQ/4/

右下のペインの高さを変更して、目的の動作をするようにしてください。私はキー（私があなたが正しくやろうとしていることを理解している）は、ヘッダとフッタにposition: fixed;を使用していると思います。また、メインのdivの上下のマージンを、ヘッダーとフッターの高さにそれぞれ設定したのと同じディメンションに設定することもできます。

EDIT：lorum ipsumに "BEGIN"と "END"を入れて、すべてが表示されていることを確認します。

EDIT＃2：更新jsFiddle：http://jsfiddle.net/RiderSargent/sjUBQ/5/

EDIT＃3：一言で言えば、私は、これはあなたが必要とjQueryのだと思う：

var headerHeight = $('#head').height(), 
    footerOffset = $('#footer').offset().top, 
    desiredHeight = footerOffset - headerHeight; 

$('.yui3-u-3-5').css('height', desiredHeight);