在頁面底部設置頁腳

Question

我在我的網站上有不同的頁面大小

如何將頁腳始終設置在頁面底部？

請注意，我需要它在頁面的底部而不是在屏幕的底部，所以如果我有短的屏幕它將在底部，如果我有很長的時間，滾動頁面I只有當我向下滾動時纔會看到頁腳。

感謝

<footer> 
    <?PHP include "footer.php"; ?> 
</footer> 

CSS：

footer { 
    background: #294a2d; 
    width:100%; 
    height: 180px; 
    color: #fff; 
    margin-top: 50px; 
} 

Answer 1

您可以在body標籤這樣使用position:absolute;的頁腳和min-height：

FIDDLE < - 幾乎沒有內容 FIDDLE < - 有很多的內容

HTML：

<div>... Content ...</div> 
<footer>... Footer ...</footer> 

CSS：

html{ 
    height:100%; 
    width:100%; 
    margin:0; 
} 
body { 
    width:100%; 
    min-height:100%; 
    margin:0; 
    position:relative; 
} 
div { 
    padding-bottom:100px; 
} 
footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:100px; 
    background:gold; 
} 

Answer 2

你應該使用這個

footer { 
position : absolute ; 
bottom : 0 !important ; 
background: #294a2d; 
width:100%; 
height: 180px; 
color: #fff; 
margin-top: 50px; 
} 

Answer 3

試試這個

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    margin: 0 0 100px; /* bottom = footer height */ 
    padding: 25px; 
} 


footer { 
    background-color: green; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
    overflow:hidden; 
} 

<footer> <h1>Footer Content</h1> </footer>

Answer 4

我用瑞恩既成事實的粘頁腳：

http://ryanfait.com/sticky-footer/