我無法在頁面底部粘上頁腳。我讀了幾十個教程，仍然有問題。在內容覆蓋整個窗口的頁面中，頁腳粘貼在底部沒有問題。但在沒有大量內容的頁面中，頁腳位於頁面中間。頁腳位於短頁的中間

<html><body> 

text here text here 

<footer id="footer"> 
    Im in the footer and bottom of the page! 
</footer> 

</body></html> 


body { 
    background: url('/static/img/bg.png'); 
    min-width: 1300px; 
    height: 100%; 
} 

footer { 
clear: both; 
padding-top:20px; 
padding-bottom:20px; 
background-color:#222; 
margin-top: 15px; 
color: white; 
text-align: center; 
}

我試圖在頁腳中添加position:absolute或position:fixed和bottom:0px，但隨後的結果是最差的。頁腳後有一個空格。

來源

2014-07-24 Tasos

我很喜歡這一個由Stuart尼科爾斯：http://www.cssplay.co .uk/layouts/basics2.html –

你可以試試這個

html, body {height: 100%;} 

#wrap {min-height: 100%;} 

#main {overflow:auto; 
    padding-bottom: 150px;} /* must be same height as the footer */ 

#footer {position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both;} 

/*Opera Fix*/ 
body:before { 
    content:""; 
    height:100%; 
    float:left; 
    width:0; 
    margin-top:-32767px;/ 
}

這一個HTML

下面是HTML代碼的基本結構。你會注意到頁腳是如何坐在外面的。

<div id="wrap"> 

    <div id="main"> 

    </div> 

</div> 

<div id="footer"> 

</div>

你會把你的內容元素放在main中。例如，如果您使用的是2列浮動佈局，則可能會出現這種情況;

<div id="wrap"> 

    <div id="main"> 

     <div id="content"> 

     </div> 

     <div id="side"> 

     </div> 

    </div> 

</div> 

<div id="footer"> 

</div>

一個標題可以放在包裝內，但在主要上面這樣;

<div id="wrap"> 

    <div id="header"> 

    </div> 

    <div id="main"> 

    </div> 

</div> 

<div id="footer"> 

</div>

來源

2014-07-24 16:18:31 ivanfromer

您可以添加一個關於如何使用main和wrap的簡短代碼嗎？ – Tasos

看看我上面編輯的答案。問候 – ivanfromer

您可以使用position:fixed和bottom:0px;這樣的：

footer { 
clear: both; 
padding-top:20px; 
padding-bottom:20px; 
background-color:#222; 
margin-top: 15px; 
color: white; 
text-align: center; 
    position:fixed; 
    bottom:0px; 
    width:100%; 
}

頁腳保持在底部，無論身體多麼內容了。要刪除空格周圍，使它的寬度100％，你需要刪除margin和padding：

body,html { 
    background: url('/static/img/bg.png'); 
    width:100%; 
    height: 100%; 
    padding:0; 
    margin:0; 
}

JSFiddle Demo

來源

2014-07-24 16:24:07

頁腳位於短頁的中間

回答

JSFiddle Demo

相關問題