日期:2014-05-17  浏览次数:20611 次

DIV+CSS布局的网页高度不能自适应问题

?

在FF下一个自适应高度的简单做法
加上
height: 100%;
overflow: auto;

自动换行的简单做法
table-layout: fixed;
WORD-BREAK: break-all;
WORD-WRAP: break-word;

下面通过DIV+CSS布局的网页高度不能自适应一个例子,来说明如何解决这个问题

<!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" c />
<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的高。
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)了。

解决方法小结:
1、父元素也浮动 (没有指定宽度的float应当伸缩包装到浮动内容的宽度)
2、clear属性
3、为父层设置 {overflow:auto; _height:1%;} 前者针对火狐IE7(overflow:auto 或hidden) 后者针对IE6(_height:1% 或he\ight:1%)
* html .clear{height:1%}
4、父元素设置高度宽度
5、针对 火狐
#d1:after
{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

其他小技巧:

html也要设置100%???? ,对后面的div可能会有影响
html,body{
height:100%;
margin:0;
}

设置 div为绝对定位.
style="width:500px; height:100%!important; background:#003333; position:absolute;"
./#/需要自动高度的地方
{
min-height:500px;
height:auto;/*IE7*/
_height:500px;/*IE6*/
display:table;/*firefox,opera*/}

?