Question

我的页面布局仍然在页面底部。问题是当我使用一些内容为FLOAT的div时。如果我省略浮动，那么内容行为正常并且不会溢出页脚。请参阅：

`enter code here`
http://jsfiddle.net/8o7t4wq9/1/


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;
}

HTML:
<div id="container">
   <div id="header"></div>
   <div id="body">
       <div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div>
       <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">First box of content</div>
       <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">Second box of content</div>
   </div>
   <div id="footer">FOOTER</div>
</div>

Answer 1

#footer {
   position:absolute;//remove
   bottom:0;//remove
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
    clear:both;//add
}

Answer 2

尝试将父div添加到浮动div并将clearfix添加到父级。

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;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}

<div id="container">
   <div id="header"></div>
   <div id="body">
       <div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div>
       <div class="clearfix">
           <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">First box of content</div>
           <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">Second box of content</div>
       </div>
   </div>
   <div id="footer">FOOTER</div>
</div>

Answer 3

很难确定/看到你的问题，但你应该看看css clearfix

将css类（clearfix）添加到容器

.clearfix:after{
    content: "";
    display:table;
    clear:both;
}

有关更多信息和浏览器支持，请查看此帖子What is a clearfix?

Answer 4

从position:absolute移除bottom:0和footer，然后添加clear:both。

#footer {
   width:100%;
   height:60px;
   background:#6cf;
   clear:both;
}

页脚底部内容溢出页脚

4 个答案: