HTML和CSS以修復網站的頁腳內容

Question

任何人都可以教我如何創建一個頁腳div，該頁腳div始終停留在網站底部，而不管中間有多少信息，這里最重要的是我沒有為中間內容固定任何height屬性（請注意，這是“網站”而不是“窗口”，因為我不想固定頁腳，從而迫使用戶在我的網站中上下滾動時總是看到頁腳）。無論您單擊多少次較早的帖子按鈕，都可以在頁面末尾看到。 無論如何，HTML和CSS甚至JavaScript都可以做到這一點。 請幫助我，非常感謝您！

Answer 1

我過去使用過stickyfooter。 您可以在這里http://ryanfait.com/sticky-footer/學習

Answer 2

您將頁腳內容放在其他內容之后。 就這樣。

（除非您需要處理定位在正常流程之外，浮動的早期內容）。

Answer 3

一種方法是使用包含頁腳div的母版頁。 請查看此MSDN文章以了解更多信息： http : //msdn.microsoft.com/zh-cn/library/wtxbf3hh.aspx

Answer 4

如果您希望將頁腳向下推到窗口底部（如果內容不足以填滿窗口），請使用本文提供的技術。

總結文章：

1. 在頁面元素周圍創建包裝器：

    <div id="container"> <div id="header"></div> <div id="body"></div> <div id="footer"></div> </div> 

2. 使用CSS，使主體高度為100%並指定容器position ：

    html, body { margin: 0; padding: 0; height: 100%; } #container { min-height: 100%; position: relative; } 

3. 再次使用CSS，為內容（在此示例中為#body ）提供一個帶有頁腳高度的padding-bottom ，並將頁腳絕對定位在bottom: 0 ：

    #body { padding-bottom: 60px; /* Height of the footer */ } #footer { position: absolute; bottom: 0; width: 100%; height: 60px; /* Height of the footer */ } 

頁腳具有固定的高度 （即px或em ）很重要。

您可以在此處看到此技術的演示： http : //jsfiddle.net/PPvG/F7Fph/