IE7 FF DIV高度不能自适应问题的解决方案

每个人都希望每天都是开心的，不要因为一些琐事扰乱了心情还，闲暇的时间怎么打发，关注可以让你学习更多的好东西，下面为大家推荐IE7、FF DIV高度不能自适应问题的解决方案，赶紧看过来吧！

先看这样一个例子：

!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0 Transitional//EN" " transitional.dtd"

html xmlns=""

head

meta http- equiv="Content-Type" c /

titleDIV高度无法自适应/title

style type="text/css"

#all {

;

;

;

color:#FFF;

background-color:#CCC;

}

#sub {

;

;

;

padding:0 5px;

background-color:#F90;

}

/style

/head

body

div

div

外层DIV高度无法自适应。

/div

/div

/body

/html

1、问题：运行这段代码可以看到，在IE下一切正常，但在FireFox或IE7下，父对象All没有适应子对象Sub的高。

2、解决方法：

例中，XHTML代码：“divdiv外层DIV高度无法自适应。 /div/div”，其CSS为：“#all {;...} #sub {;...}”。

由于子对象Sub设置了浮动，而父对象All没有设置浮动，所以才会出现这样的问题。

（1）将父对象也设置浮动。即把“;”加到“#all {...}”中。

（2）将子对象的浮动属性去掉。即把“;”从“#sub {...}”中删除。

（3）在“div外层DIV高度无法自适应。/div”的后面加一个空的块级对象，并设置 “”取消浮动。如“” 。但此方法在IE中仅限于有两个或两个以上的浮动子对象时才生效，只有一个浮动子对象，用此方法底下会多出10px的高度。

由方法（2）又想到了一个新问题，如果类似论坛中，一个话题分左右两边的布局，而且左右分别都有固定的宽度时就必须要用到浮动属性。如：

div

divdiv左边是用户头像/divdiv右边是话题内容/div/div

...

/div

这种情况下方法（2）和方法（3）就不适用了。因为方法（2）是将子对象的浮动属性去掉，而去掉浮动属性就不可能实现；方法（3）仅适用于有多个浮 动对象，但如果恰巧只有1条记录呢？除非下面不在乎那10px。此时我向最适用的就是方法（1）了。

解决方法小结：

1、父元素也浮动 （没有指定宽度的float应当伸缩包装到浮动内容的宽度）

2、clear属性

3、为父层设置 {; _height:1%;} 前者针对火狐IE7（ 或hidden） 后者针对IE6(_height:1% 或height:1%)

* html .clear{height:1%}

4、父元素设置高度宽度

5、针对 火狐

#

{

content:".";

height:0;

;

;

;

}

其他小技巧：

html也要设置100%，对后面的div可能会有影响

html,body{

%;

margin:0;

}

设置 div为绝对定位.

style="; %!important; background:#003333; ;"

./#/需要自动高度的地方

{

;

**

_height:500px;/*IE6*/

*,*

如果觉得《IE7 FF DIV高度不能自适应问题的解决方案》对你有帮助，请点赞、收藏，并留下你的观点哦！