如何使用CSS正確定位頁腳？

有人可以幫我把我的頁腳正確放在我的網頁上嗎？如何使用CSS正確定位頁腳？

我有以下佈局：

enter image description here

這是我多麼希望頁腳的行爲：

頁腳應該在網頁的底部放置當含量空。
當內容超出頁面高度時，頁腳應該被「推下」。

這裏是我的HTML：

<html> 
    <head> 
     <title>@ViewBag.Title</title> 
    </head> 

<body> 

/* This is outside of the container as I want the background 
    to stretch across the top of the webpage */ 
<div id="menu"> 
    <div> 
     /* This contains an unordered list which is restyled as a series of links. 
      The reason it is contained in inside the menu div is because I want this 
      content to be centred. /* 
    </div> 
</div> 

<div id="page-container"> 

     <div id="header"> 
      <h1>Website title</h1> 
     </div> 

     /* This is floated to the left of the content area. */ 
     <div id="content"> 
      @RenderBody() 
     </div> 

     /* This is floated to the right of the content area. */ 
     <div id="sidebar"> 
      @RenderSection("sidebar", false) 
     </div> 

</div> 

<div id="footer"> 
    My footer content goes here. 
</div>

請注意以下事項：

內容和頭包含在一個 'DIV' 叫「頁面容器」。
內容由浮動在內容區域左側和右側的兩個Div組成。
該菜單位於頁面容器div之外。這是因爲我希望菜單背景，在頁面的頂部伸展（如＃1菜單）

我知道有＃2，許多類似的問題谷歌搜索會返回大量的結果。

我試圖調整我發現的樣本時注意到的事情是，它們通常依賴於與我的不匹配的非常特定的html結構（E.G.所有內容，但頁腳在容器中）。無論我嘗試什麼，我最終都會遇到一些不起作用的東西（例如，當內容爲空時，頁腳位於屏幕邊界下方，或者當內容超出頁面時，頁腳不會向下移動）。

更新

我可以讓我的頁腳粘到頁面的底部，但是當我的內容擴展它沒有被按下。我認爲這是因爲我的內容由兩個浮動元素組成。

大多數人似乎都指着我找到他們在Google上找到的教程（正如我已經說過的，我已經閱讀了大部分教程並已嘗試調整它們）。

我得出結論，我將不得不重構我的HTML以使其工作;我的問題的重點是我如何用HTML已經有的做到這一點？非常關注分離問題！

來源

2012-08-14 Benjamin Gale

j08691的評論是我認爲你正在尋找的。您可以調整它以適合您的HTML。 – jmbertucci 2012-08-14 15:19:54

@ j08691the鏈接現在是垃圾郵件 – 2017-05-07 02:25:00

由於在編輯我的文章中提到，我最後不得不稍微改變我的HTML：

<body> 
    <div id="page-container" > 
     <div id="menu"> 
      <div> 

      </div> 
     </div> 

     <div id="layout-container"> 

      <div id="header"> 
       <h1>Website title</h1> 
      </div> 

      <div id="content"> 
       @RenderBody() 
      </div> 

      <div id="sidebar"> 
       @RenderSection("sidebar", false) 
      </div> 

     </div> 
    </div> 

<div id="footer"> 

</div>

我的CSS是基於CSS發現here（這同一個鏈接被張貼由幾個人，但我已經在使用這個了！）

該解決方案約99％的有效。當內容區域爲空時，我的頁腳粘到頁面的底部，並且當內容變得比屏幕大時，它也被按下，但現在我有一個永久性滾動條，因爲我的頁面高度似乎已關閉（移動鼠標滾輪滾動該頁面上下單個像素）。

我到目前爲止一直無法擺脫這一點，所以我勉強接受這是一個完整的解決方案，除非任何人都可以指出我正確的方向。

更新

看來1個像素是由具有1個像素頂部邊框我的頁腳引起抵消。我簡單地調整了我的CSS來解決這個問題，當內容沒有完全填滿屏幕時滾動條消失。

#footer { 
    margin-top: -151px; 
    height: 150px; 
}

來源

2012-08-14 19:24:15

環繞你div -s在包裝：

#wrapper { 
    width:100%; 
    height:500px; 
    background:#ccc; 
    margin:auto; 
    position:relative; 
}

，並使用以下CSS爲您的頁腳：

#footer { 
    width: 100%; 
    height: 80px; 
    background-color: #ccc; 
    position:absolute; 
    bottom: 0; 
}

來源

2012-08-14 15:16:01 Lunar

你建議我包裝哪個div？我在我的html和示例中發現的主要區別是我的菜單div在容器div之外。正如我所解釋的，如果我這樣做，我將無法在整個頁面寬度上拉伸菜單背景。 – 2012-08-14 15:26:44

包裝所有div應該工作 – Lunar 2012-08-14 15:31:06

這一半工作 - 頁腳粘到頁面的底部，但不能在頁面上展開（我可以通過將寬度設置爲100％來解決此問題），（更關鍵的是）不會向下移動當內容超過頁面高度時頁面。 – 2012-08-14 15:40:24

您是否嘗試過身體設置爲position:relative和頁腳position:absolute與bottom:0？

來源

2012-08-14 15:19:57 user1368737

這使得頁腳粘在頁面的左上角。 – 2012-08-14 15:23:31

嘗試編輯你的CSS包括像下面這樣：

#footer { 
width: 710px; 
height: 50px; 
margin: 0 auto; 
padding: 40px 0 0 0; 
} 

#footer p { 
margin: 0; 
text-align: center; 
font-size: 77%; 
} 

#footer a { 
text-decoration: underline; 
} 

#footer a:hover { 
text-decoration: none; 
}

然後把它在你的頁腳。

來源

2012-08-14 15:25:45