頁腳寬度和位置查詢

Question

由於某種原因，我無法讓頁腳停留在頁面底部

編輯：我試圖將其保留在頁面的底部，而不是窗口的底部

即使我將其設置為width：100％，它似乎也是上一個div寬度的100％，而不是頁面的100％。

這是整個頁面的jsFiddle： http : //jsfiddle.net/eehSa/1/

我在頁腳中使用的CSS代碼是：

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

Answer 1

您需要將left值設置為left: 0; 固定位置position:fixed;

 #footer #footer {height:50px; width:100%; background-color:red; position:fixed; bottom:0px;left: 0;}

現場演示

UPDATE

#container {height:100%;
position: relative;
width: 90%;
margin: 0 0 20% 5%;/* add some magrin-bottom*/
background-color: white;
top: 80px;
}

在身體上：

   body {background-color:lightgray; padding:0;margin:0;}/* add padding and margin*/

相對位置

 #footer {height:50px; width:100%; background-color:red; position:relative; bottom:0px;left: 0;clear:both;}

現場演示：

Answer 2

設置 position:absolute position:fixed footer

編輯：

應用CSS重置*{padding:0;margin:0;}然后將footer的position更改為relative position ，然后從容器中移除top 。

演示：

http://fiddle.jshell.net/Nw7ej/show/

Answer 3

為此，您需要執行一些步驟，請嘗試以下操作： http : //jsfiddle.net/eehSa/4/

html,body{                       /** Add new style to html,body */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background-color:lightgray;
    position: relative;         /** New */ 
    height: auto;               /** New */
    min-height: 100%;           /** New */
    padding-bottom: 75px;       /** New, equal to footer height + x */
}
#footer {
    height:50px; 
    width:100%; 
    background-color:red; 
    position:absolute; 
    bottom:0px;
    left: 0;                    /** New */
}