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

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

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

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

但请确保填充底部是页脚的高度！

Answer 3

像这样添加

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

页脚CSS

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

制作页脚的最佳方法始终是伸展到底部

3 个答案: