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

来源：互联网发布：js eval方法编辑：程序博客网时间：2024/05/22 00:10

转自：

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的高度，超出时才自动撑大。

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

看例子：

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

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

问题迎刃而解：）

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