粘性頁腳+ 100％身高+他們之間的空白量

我的總體目標是在身高100％的內容和粘性頁腳之間創建保證金;通過它顯示身體背景。粘性頁腳+ 100％身高+他們之間的空白量

截至目前，我使用jQuery來計算文檔的高度，並減去頁腳的高度加上頁邊距，然後將該新大小應用於ID爲「content」的DIV。

然後，我使用jQuery的resize（）函數來調整div的大小，如果視口的大小發生變化，所以如果用戶調整了他或她的瀏覽器窗口，或者放大，DIV的大小會自動更新。

不幸的是，當我在縮放時切換方向（即放大後縮小，反之亦然），Javascript無法識別視口大小調整，使我對內容的背景太長或太短。此外，此調整大小不會識別內容。我正在考慮在CSS中設置一個最小高度，但是如果有一種方法可以在Javascript中實現，那麼我就是耳朵。

我會接受純粹的CSS和HTML解決方案，因爲它似乎像它應該是可能的，但我已經筋疲力盡，尋找答案。

我當前的Javascript（運行jQuery庫1.7.2）：

$(document).ready(function(){ 

    var height1 = $(document).height(); // height of full document 

    var height2 = 100; // height of footer plus margin 

    var height_diff = height1 - height2 +"px"; 

    document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV. 

}); 

$(window).resize(function() { 

    var height1 = $(document).height(); // height of full document 

    var height2 = $("#footer").height(); // height of footer 

    var height_diff = height1 - height2 +"px"; 

    document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV. 

});

任何方向是極大的讚賞。

編輯

知道了，所有沒有JavaScript。 http://jsfiddle.net/Rpdr9/610/

來源

2012-07-11 jporcenaluk

我在小提琴上做了些什麼。在我看來，這就是你想要的。

檢查出來：http://jsfiddle.net/XbXDn/ 橙色：內容灰色：頁腳

重要的是也給你的身體和HTML的高度：100％;屬性。正如您所看到的，內容div自動增長（甚至超過100％），因爲您添加更多文本，儘管內容和頁腳之間的25毫米頁邊始終保持不變。

我特意花了巨大的優勢內容和頁腳之間，只是讓你可以看到它的工作原理:)

來源

2012-07-11 06:31:11 PoeHaH

http://jsfiddle.net/XbXDn/1/我絕對欣賞，你把這個努力。我添加到JSFiddle中，希望能夠更清楚地表明我想要做什麼。我希望在內容和頁腳之間有「空白空間」，這樣身體背景就會顯示出來。我有一些瘋狂的背景漸變/圖像動作在進行，我不能通過將背景完全放置在內容的底部或類似的東西來「僞造」它;因此我需要那種空白的或透明的「邊緣」，或者真正需要分隔頁腳和內容的東西。 – jporcenaluk 2012-07-11 06:44:11

我明白了..這是一個艱難的。看看這裏：http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin。也許你可以將這些代碼與你目前擁有的代碼結合起來 – PoeHaH 2012-07-11 06:55:09

我看到了這個代碼並試圖實現它。它似乎不適用於粘性頁腳;但我可能沒有正確使用它。我會再試一次。 – jporcenaluk 2012-07-11 07:16:24

粘性頁腳+ 100％身高+他們之間的空白量

回答

相關問題