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

Answer 2

像这样添加

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

页脚 CSS

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

Answer 3

您可以轻松地将以下内容放入您的 CSS 中。

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

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

但请确保 padding-bottom 是页脚的高度！