粘性頁眉和頁腳與可縮放的div

我試圖實現一個固定的頁眉和頁腳與內部主要內容滾動頁眉和頁腳下，並修復正確的導航。粘性頁眉和頁腳與可縮放的div

我能得到儘可能接近這個唯一的辦法就是這個http://jsfiddle.net/sjUBQ/嘗試，但我有固定的高度爲300像素的#main .yui3-U-3-5 {背景：#aaa;高度：300像素; overflow：auto;}以獲得滾動條。

我嘗試添加jQuery代碼：

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

但這並沒有工作，所以我如何得到一個棘手的頁眉和頁腳與內部的div顯示滾動條，如果含量較高，那麼實際的瀏覽器窗口？

來源

2012-05-03 khinester

您是否嘗試過在網上搜索「粘頭HTML」？ – Blazemonger

這不是問題！我有粘性頁眉和頁腳工作，我很想知道如何修復內部div的高度，並顯示滾動條，如果內容較大，而不必爲此div設置高度，因爲用戶具有不同的屏幕尺寸 – khinester

這是你要去的嗎？ http://jsfiddle.net/RiderSargent/sjUBQ/4/

嘗試更改右下方窗格的高度，查看它是否按照您的方式行事。我認爲關鍵（如果我明白你想要做的是正確的）使用position: fixed;作爲頁眉和頁腳。您也可能想要將主div的頂部和底部邊距設置爲您爲頁眉和頁腳的高度分別設置的相同尺寸。

編輯：我把「BEGIN」和「END」放在lorum ipsum中，以確保它全部顯示。

編輯＃2：更新的jsfiddle：http://jsfiddle.net/RiderSargent/sjUBQ/5/

編輯＃3：總之，我認爲這是jQuery的需要：

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

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

來源

2012-05-03 20:00:47

嗨感謝您的回覆，我試圖弄清楚如何把內部div的滾動條！我想讓頁眉，頁腳和右欄始終顯示，並且只在內部主內容div上具有滾動條。 – khinester

啊，好的。我在這裏更新它：http://jsfiddle.net/RiderSargent/sjUBQ/5/ 簽出jQuery代碼來計算main的高度。如果你調整它的大小，那麼運行jsfiddle，它應該做你想做的，我想。我已經將計算出的高度輸出到頭文件中進行調試。你應該能夠毫無困難地移除'$（'。pad1'）.text（mainHeight）;'行。 –

謝謝你，我正在尋找什麼。 – khinester

粘性頁眉和頁腳與可縮放的div

回答

相關問題