div高度自动撑大的问题（兼容ie和FF）

转自：

http://hi.baidu.com/%B9%F9%E8%B40110/blog/item/130a6d253bdcba0b4c088def.html

http://www.xnwai.com/?tag=ie%E4%B8%8Eff%E4%B8%ADdiv%E8%87%AA%E5%8A%A8%E6%92%91%E5%A4%A7%E7%9A%84%E9%97%AE%E9%A2%98

今天排版页面又遇到这个问题了，之前这样写可以：height:auto!important; height:200px; min-height:200px;，可是今天怎么就不行了，也不知道怎么回事，上网查了查，原来要在div上加一个overflow:hidden;记得把 height:200px;去掉，不然ie6会把多余的内容隐藏掉。试了试，可以，(*^__^*) 嘻嘻……继续努力吧!

min -height是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使用了，ie6下设置了高度和宽度，当内容超出时div会自动撑大。min -width对ie7和ff管用，最好的办法是这样写：height:auto!important; height:200px; min-height:200px;overflow:hidden;这样的话不管是在ie6，ie7还是ff下都起作用了，也就是内容没有超出200px时div显示200px的高度，超出时才自动撑大。

---------------------------------------------------------------------------------------------------------------------------------

看例子：

<style type="style/css">
.head{ width:980px; height:100px; background-color:#66FF33;}
.content{ width:980px; background-color:#FFFF00; }
.left{ float:left; width:200px; height:300px; margin-left:50px; background-color:#99FFFF;}
.right{ float:left; width:200px; height:300px; margin-left:50px; background-color:#FF33FF;}

.foot{width:980px; height:100px; background-color:#330000;}

</style>
<div class="head">
</div>
<div class="content">
<div class="left">
</div>
<div class="right">
</div>

</div>
<div class="footer">
</div>

csdn上看到有个人在请教这个问题.
问题是：以下代码在IE中可以的到想要的效果，content（DIV）会被自动撑大，但是在FF下content（DIV）不会被撑大.
其实我在做网页之初我也碰到过这个问题.
父元素在非IE浏览器中不能自适应子元素高度.
在这里首先我们要知道的是.没有定义float的父元素它在默认状态下它是不会自动计算高度的.
而且必需要添加一个辅助元素，并且要定义clear：both；
在这种方法下。 成功撑大 content 但是footer不见踪影。
最终解决方法。如下：

<style type="style/css">
.head{ width:980px; height:100px; background-color:#66FF33;}
.content{ width:980px; background-color:#FFFF00;overflow=auto;}
.left{ float:left; width:200px; height:300px; margin-left:50px; background-color:#99FFFF;}
.right{ float:left; width:200px; height:300px; margin-left:50px; background-color:#FF33FF;}

.foot{width:980px; height:100px; background-color:#330000;}
.clear{clear:both;}
</style>
<div class="head">
</div>
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clear">
</div>

</div>
<div class="footer">
</div>

只要在content主容器内， 添加属性overflow：auto； /*强制父元素适应子元素的高度*/
至于clear 只是清楚两边的浮动元素。

问题迎刃而解 ：）

注意：div#clear 在其中起了很重要的作用。