使頁腳始終伸展到底部的最佳方法

Question

我的頁腳與網站的其他部分顏色不同，其高度大約爲400px。當頁面上沒有很多內容時，頁腳下方會有一個白色條。如果需要的話，我希望頁腳伸展到窗口的底部。

我做不是想在我的頁面底部粘一個頁腳。

同樣使用Foundation框架，以防萬一。

<section id="footer"> 
    <div class="row"> 
    <div class="small-12 columns"> 
     <ul id="footer-links"> 
     <li></li> 
     <li></li> 
     </ul> 
    </div> 
    </div> 
</section> 


#footer { 
    padding:60px 0px; 
    text-align:center; 
    background-color:#6f6f6f; 
    color:#aaa; 
    height:100%; 
} 
#footer-links { 
    list-style-type: none; 
    width:100%; 
    text-indent:0px; 
    margin: 0px; 
    padding: 0px; 
} 
#footer-links li { 
    display:inline; 
} 
#footer-links a { 
    text-decoration:none; 
    font-family:helvetica,sans-serif; 
    font-weight:100; 
    font-size:1.1em; 
    color:#ddd; 
    margin-left:10px; 
    margin-right:10px; 
    text-transform:lowercase; 
} 

Answer 1

你可以很容易地把下面的東西放到你的css中。

html, body { 
    position: absolute; 
    height: 100%; 
} 

#header { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

但請確保填充底部是頁腳的高度！

Answer 2

使用粘性頁腳： http://www.cssstickyfooter.com/

而且那裏有一種方式，使用Twitter的引導，使其與它的工作： http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Answer 3

像下面這樣添加

body,html{position:relative; height:100%} 

頁腳CSS

#footer{ position:absolute; bottom:0; height:400px; width:100%}