固定的頁眉/頁腳，可滾動的內容，空間高於/低於

我見過幾個類似的問題（做了很多更多的研究），但我不認爲他們中的任何一個都提供瞭解決這個特定問題的方法......固定的頁眉/頁腳，可滾動的內容，空間高於/低於

我做什麼，我這裏指的是一個簡單的例子：https://gist.github.com/anonymous/62bb6b6e405549a36ae9

這不是我使用（因爲我與WordPress的工作），但它說明我的問題，這就是，特別是實際的代碼：

我正在一個網站上有一個固定的頁眉和頁腳，其中的內容。我已經這樣做了，它工作正常。但是，我不希望頁眉和頁腳觸及瀏覽器的頂部和底部（例如，它們將具有20像素的邊距，因此容器和底部之間的空間不會很大瀏覽器）。

問題是，當您滾動頁面時，內容在頁眉/瀏覽器和頁腳/瀏覽器之間的空間中可見。如在中，您可以看到它在頁眉上方和頁腳下方滾動;我想避免這種情況。

有沒有某種方式來設置內容容器的風格，使其不會顯示在頁眉/頁腳下方？

此刻，我在頁眉和頁腳上使用背景圖片，並將它們推向瀏覽器的邊緣;但它的設計限制性很強，我不想把自己鎖在這樣做。

注：我的這個項目的規格是背景必須非常形象，這就是爲什麼我特別關於頁眉和頁腳。這實際上限制了我們可以使用的圖像，因爲我們必須假定詳細的背景被切斷，我們無法控制它的切割方式 - 這意味着我不能將頁眉和頁腳切成圖像來「僞造「這個樣子。

來源

2014-04-18 user3550137

如果您可以使用jQuery。您可以計算固定框之間的距離並將您的內容放置在那裏。

我添加了一個內部div來填充固定內容div。

輕微的CSS變化。

Fiddle here

var topOffset = $('#header').offset().top + 30; 
var bottomOffset = $('#footer').offset().top; 
var distance  = (bottomOffset - topOffset); 
$("#content").css("height", distance);

UPDATE 你也可以考慮重新計算當瀏覽器大小打開上面的代碼放到一個函數，然後從大小調整調用以及

JQuery Resize

$(window).resize(function() { 
    $("#log").append("<div>Handler for .resize() called.</div>"); 
});

來源

2014-04-18 21:45:10 tmcc

而不是使用保證金，你可以只使用一個固定位置的div容器。

#whitebox {position:fixed; margin-top:-20px; background-color:blue;width:100%;height:24px;}

See example based off your code。只需將顏色設爲白色或任何背景顏色即可。

來源

2014-04-18 21:12:10 AndrewH

這絕對是我沒有的東西但是在這種情況下（背景是圖像而不是純色），我仍然有同樣的問題。頂部的圖像總是相同的，但由於底部會根據窗口的大小被切斷，所以我無法知道在哪裏爲頁腳剪切圖像。儘管謝謝你的回答！ – user3550137

固定的頁眉/頁腳，可滾動的內容，空間高於/低於

回答

相關問題