使頁腳高度延伸到頁面底部

我有一個非常簡單的問題網頁。它是3個divs，坐在對方的頂部，標題，內容然後頁腳。使頁腳高度延伸到頁面底部

我想讓我的頁腳高度展開到頁面底部。我怎樣才能做到這一點？

標題的高度不變，根據從AJAX調用接收到的內容，內容的高度會有所不同。所以我不能明確地設置它。

繼承人我的jsfiddle：http://jsfiddle.net/5U6ZB/2/embedded/result/

<div id="header"></div> 
<div id="content"> 
    <!-- height is dynamic sometimes it will be full of divs that makes it 
     longer than the screen height other times it only has 1 div --> 
</div> 
<div id="footer"> 
    <!-- How do I make the footer height fill up the rest of the page height? --> 
</div> 

body { background-color: white; } 
div { width: 100%; } 

#header { 
    height: 400px; 
    background-color: RGB(200,200,200); 
} 

#content { 

} 

#footer { 
    background-color: RGB(112,112,112); 
    /*How do I make the footer height fill up the rest of the page height?*/ 
}

來源

2012-02-16 Jake M

聽起來像你的情況最簡單的解決辦法是使身體的背景顏色相同的頁腳，使你的內容白色。這會讓頁腳的幻想一路走向底部。

body { background-color:RGB(112,112,112); } 
div { width: 100%; } /* Divs are block elements which automatically take 100% width so this is redundant. */ 

#header { 
    height: 400px; 
    background-color: RGB(200,200,200); 
} 

#content { 
    background-color:white; 
} 

#footer { 
    background-color: RGB(112,112,112); 

}

來源

2012-02-16 01:34:55 SynXsiS

在純CSS，這是不可能的，但如果你想使用一些花哨的Javascript，可以動態改變頁腳伸展剩餘高度的高度，假設內容已經不這樣做了您。

var header = document.getElementById("header"), 
    content = document.getElementById("content"), 
    footer = document.getElementById("footer"), 
    height = window.screen.height - header.clientHeight - content.clientHeight; 

footer.clientHeight = (height < 150) ? 150 : height; // Sets a minimum height of 150px

它通常是更好地遵循SynXsiS的建議雖然，因爲這會給人一個更好的外觀。最終，這取決於您設計頁面外觀的方式。

來源

2012-02-16 01:48:18 fayerth

html { 
background-color:#093; /*the footer color*/ 
} 

body { 

background-color: #f6f; /*the body color*/ 
}

來源

2012-09-08 04:33:35 steve

不太什麼要求，但我想，他到底是什麼之後 - 當然，這正是我，當我結束了這個頁面後！謝謝。 – BFWebAdmin 2012-09-21 07:42:19

fayerth的類似方法，這將在瀏覽器調整大小（並基於jQuery）時動態調整高度。

不是直接調整頁腳的大小，而是添加了額外的空元素<div class="flex-footer">並改爲調整大小。我的想法是，如果頁腳包含一系列元素，並且不會與任何頁腳的相對於父項大小的子元素混淆，那麼它應該使頁面不太緊張。

然後，您的CSS應該應用所需的任何背景顏色。

請注意我關於負邊距的評論。這對我來說是必要的，因爲設計需要使用負邊距。我已經包括了這一點，以防你的做法。

$(function(){ 
     $(window).load(resizeFooter); 
     $(window).resize(resizeFooter); 
    }); 
    // Dynamically resize footer to fill page, IE8 doesn't like this. 
    function resizeFooter() { 
     var windowHeight = window.innerHeight; 
     var headerHeight = $("header").height(); 
     var contentHeight = $("div.main").height(); 
     var footerHeight = $("footer").height(); 
     // 107 references a negative margin in header - you'll need to account for this if necessary 
     var flexFooter = windowHeight - (headerHeight + contentHeight + footerHeight - 107); 
     $(".flex-footer").css("min-height", flexFooter); 
    }

來源

2013-01-15 00:37:30 pspahn

就像一個魅力！ double ++ – 2013-02-07 04:34:57

很簡單，對我的作品:)

頁腳{位置：絕對的;寬度：100％;頂部:(閱讀下面）; }

您可以在頂級物業diferent百分比值嘗試，當頁腳採取所需的發生在你的屏幕，該百分比將適用於所有決議:)

來源

2013-08-11 07:19:12

不錯，沒有javascript，我仍然需要對一些瀏覽器進行測試 – 2013-12-13 02:28:56

:root { 
    background-color: siteBackgroundColor; 
} 

body { 
    background-color: footerColor; 
}

這並不能真正展開頁腳，但在視覺上擴展其背景顏色。

來源

2013-12-18 11:29:08 user3115008

這與此相反，不是嗎？設置'：root'的背景來匹配頁腳和'body'以匹配網站。 – evanrmurphy 2014-10-15 04:31:23

我調整了wordpress主題 - 並且有同樣的問題。但是 - 如果我實施了粘滯頁腳，它實際上會部分滾動瀏覽內容。Wordpress是一團糟，所以我不確定它爲什麼這樣做 - 但我需要的是讓頁腳位於主要內容的下方，但是那麼填充屏幕的其餘部分，以免在較短的頁面上顯得無聊。

除了顏色技巧之外，還有一個簡單的CSS修復的想法嗎？（這是我可以做的;）

克勞迪婭

來源

2014-01-11 18:36:15 claudybee

使頁腳高度延伸到頁面底部

回答

相關問題