Question

如何解决firefox里居中的DIV的自适应高度？（浏览器兼容方面问题）

各位好。我是CSS方面的新手。有个问题想请教一下。现在又两个DIV“big”“small”,要求大的DIV在页面上居中，高度设为AUTO。小的DIV高度根据内容自适应。当小的DIV高度增大时，在IE6里可以撑开外面的DIV，但是在FF里就不行。不知道各位怎么解决这个问题的呢？

<div id="big" style="margin:0px auto; width:600px; height:auto; background:#ff0000; padding-bottom:200px;">

<div id="small" style="float:left; width:500px; margin-left:50px; height:auto;background:#666666;">
这里是内容<br>
</div>

</div>

Answer 1

你的问题在于：
在Firefox中，浮动元素将会脱离文档流，所以你对small进行了左浮动那么它就脱离了big的包围，当然就不会撑开big了。而IE里面浮动的元素并不会脱离文档流。解决的方法就是在big里加一个overflow:hidden;
另外从IE6里看，small并没有在big里居中，这是因为在IE6里引发了“双边浮动”BUG，IE6里浮动元素的margin值会变成设定值的两倍，意思就是说你这里将samll的margin-left:50px;但是在IE6中实际上会有100px；解决这个BUG的方法很简单，在small元素上加display:inline;就可以了。

Answer 2

在big里加overflow:hidden ff里自动会清楚浮动 会随着small撑开big的div
但是 ie中就会产生 small超出的部分隐藏
加一个ie的私有属性 zoom:1
就可以了

Answer 3

.big
{
margin:0 auto;
}
.small
{
height:100%;
}
.clear //很关键
{
height:0;
overflow:hidden;
clear:both;
font-size:0;
}
<div class="big">
<div class="small">
这里是内容<br>
这里是内容<br>

</div>
<p class="clear"></p>
</div>

Answer 4

.big
{
margin:0
auto;
}
.small
{
height:100%;
}
.clear
//很关键
{
height:0;
overflow:hidden;
clear:both;
font-size:0;
}
<div
class="big">
<div
class="small">
这里是内容<br>
这里是内容<br>
</div>
<p
class="clear"></p>
</div>