css - 使页脚始终延伸到底部的最佳方法

Question

我的页脚与网站的其他部分颜色不同，高度大约为 400 像素。当页面上没有很多内容时，我会在页脚下方显示一个白色条。如果需要，我希望页脚延伸到窗口底部。

我不想在我的页面底部有一个粘性页脚。

也使用 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

使用粘性页脚: http://www.cssstickyfooter.com/

还有一种方法可以使用 twitter bootstrap 使其与它一起工作: http://getbootstrap.com/2.3.2/examples/sticky-footer.html