yoguz
查看yoguz的博客
| 金钱 | : 18255 |
| Level | : 0 |
| 发帖数 | : 1564 |
| 最后登陆 | : 2019/10/24 |
| 注册时间 | : 2004/12/13 |
|
DIV高度不能自适应的问题解决
当DIV中是一段文字时一切正常，如果DIV中又包含了设置了浮动属性子DIV时就有可能出现这样的问题。
这种问题在FireFox和IE7中比较常见。在IE6中，就算设置了高度，当内容或子对象超过了范围时，DIV的高度也可以自动增加以适应内容（除非设置了overflow属性限制大小）。但在FireFox和IE7下就不会有这种情况。下面以FireFox来举例说明出现情况的原因及解决办法。
先看这样一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV高度无法自适应</title>
<style type="text/css">
#all {
width:240px;
padding:10px;
font-size:12px;
color:#FFF;
background-color:#CCC;
}
#sub {
float:left;
width:230px;
line-height:20px;
padding:0 5px;
background-color:#F90;
}
</style>
</head>
<body>
<div id="all">
<div id="sub">
外层DIV高度无法自适应。
</div>
</div>
</body>
</html>
1、问题：运行这段代码可以看到，在IE下一切正常，但在FireFox或IE7下，父对象All没有适应子对象Sub的高。FireFox下如图：
2、解决方法：
例中，XHTML代码：“<div id="all"><div id="sub">外层DIV高度无法自适应。</div></div>”，其CSS为：“#all {width:240px;...} #sub {float:left;...}”。
由于子对象Sub设置了浮动（float:left），而父对象All没有设置浮动，所以才会出现这样的问题。
（1）将父对象也设置浮动。即把“float:left;”加到“#all {...}”中。
（2）将子对象的浮动属性去掉。即把“float:left;”从“#sub {...}”中删除。
（3）在“<div id="sub">外层DIV高度无法自适应。</div>”的后面加一个空的块级对象，并设置“clear:both;”取消浮动。如“<div style="clear:both"></div>”。但此方法在IE中仅限于有两个或两个以上的浮动子对象时才生效，只有一个浮动子对象，用此方法底下会多出10px的高度。
由方法（2）又想到了一个新问题，如果类似论坛中，一个话题分左右两边的布局，而且左右分别都有固定的宽度时就必须要用到浮动属性。如：
<div id="all">
<div class="sub"><div class="left">左边是用户头像</div><div class="right">右边是话题内容</div></div>
...
</div>
这种情况下方法（2）和方法（3）就不适用了。因为方法（2）是将子对象的浮动属性去掉，而去掉浮动属性就不可能实现；方法（3）仅适用于有多个浮动对象，但如果恰巧只有1条记录呢？除非下面不在乎那10px。此时我向最适用的就是方法（1）了。
其实，只要能在特殊问题上灵活运用，并解决问题就是好的方法，再强调一下我的观点：“用最简单的方法解决最复杂的问题”。
|
![[鍜界値鍚冧粈涔堣嵂]姣忓ぉ娉�2琚嬶紝鍧氭寔30澶╋紝鍜界値濂藉鍒�](http://www.shuyancha.com/images/syc.jpg)
