2

我需要将页脚向下移动到页面底部，无论上面的页面上有多少内容。所以我在互联网上进行了一些搜索，并根据该站点找到了一个解决方案：

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

但是，在我将“float:left”应用于内容 div 之前，一切正常。页脚不再位于底部并被撞到一半。我的问题是，当上面的 div 中有浮动时，如何保持页脚向下？

请在此处查看此 jsfiddle 以获取我的示例：

http://jsfiddle.net/mEuke/5/

或此处的代码：

<style type="text/css">
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

</style>

<div id="container">
   <div id="header"></div>
   <div id="body">

   <div id="test" style="float:left">
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
   </div>   
      </div>


   <div id="footer"></div>
</div>
4

1 回答 1

1

您需要在浮动子项的容器上使用clearfix

这是一个适用于现代浏览器的现代clearfix。

#body:after { /* #body is your container */
  content: "";
  display: table;
  clear: both;
}

这将解决您的问题

演示：http: //jsfiddle.net/mEuke/7/

对于跨浏览器clearfix阅读这篇文章：http ://css-tricks.com/snippets/css/clear-fix/

什么是清除修复？

clearfix 是元素在其自身之后自动清除的一种方式，因此您无需添加额外的标记。它通常用于浮动布局，其中元素浮动以水平堆叠。

clearfix 是一种解决浮动元素的零高度容器问题的方法。

资料来源：什么是clearfix？

于 2013-08-01T17:06:54.277 回答