HTML頁腳粘到瀏覽器的底部，除非滾動條需要

在一些網頁上，內容很少，頁腳在我的頁眉附近縮小。在這些情況下，我希望頁腳卡在底部。我可以在CSS中輕鬆地做到這一點：HTML頁腳粘到瀏覽器的底部，除非滾動條需要

#footer { 
    position: fixed; 
    width: 100%; 
    bottom: 0; 
}

工程很好。但是，有時內容不是最小的，您甚至可能需要滾動才能看到底部的內容。在這些情況下，我希望頁腳能夠像正常一樣簡單地在內容後面出現。

有沒有辦法在CSS中做到這一點？我需要一個Javascript黑客？如果我需要黑客，有沒有一個好的圖書館？我已經使用jQuery，很高興根據它使用某些東西。我不關心IE8或以下。我只關心IE9 +以及Chrome，Firefox，Safari和Opera的最新版本。

2012-02-20 at.

我用這裏所描述的技術更可愛： http://www.cssstickyfooter.com/

似乎從你知道你的頁腳的高度要求工作完美一邊提前...

2012-02-21 03:08:44

對我來說也很完美 - 很棒的CSS技巧 – 2014-05-18 11:07:05

-1

既然你需要的功能即將在content容器，其具有的空白，當含量小於足以填滿瀏覽器的高度，你可以使用一個最小高度爲content div來使它強制頁腳有關頁面底部。

即。如果您的HTML是：

<div class='header'> header </div> 
<div class='content'> some content here </div> 
<div class='footer'> footer </div>

然後通過應用CSS，如：

.content { min-height:300px; }

內容將始終佔據至少是高度，而不是堅持了貼近頭部。

您也可以嘗試margin-bottom的內容，如果這是

2012-02-20 22:48:14 Kypros

問題是我不知道有多高，使內容...除非我使用JavaScript。我當然可以做，但尋找一個CSS解決方案或JavaScript/jQuery庫。 – 2012-02-20 23:27:58

回答