参考:兼容性良好的DIV自动高度解决方法
http://blog.missui.com/archives/%E5%85%BC%E5%AE%B9%E6%80%A7%E8%89%AF%E5%A5%BD%E7%9A%84div%E8%87%AA%E5%8A%A8%E9%AB%98%E5%BA%A6%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95.html
重要提示:
IE6 和IE7中,包含子容器的父容器高度自适应,有个BUG,比如说在这个例子里面,如果没用使用相关的技巧,那么就会把最后个子容器的margin-bottom:10px给忽略了。
所以这两个是个比较完美的方案。
方案一,父容器的最后放一个clear:both的子容器。
方案二,父容器的overflow和height的自动高度“auto”。
代码
<!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">
<!--
.line{ border: 1px dashed #333;}
.con {margin:auto; background-color:#FFFFCC;}
.top{ height:200px; width:80%; background-color:#eee; margin:0 auto 10px auto;}
.cl{ clear:both;}
.con1 { overflow:auto; height:auto;margin:auto; background-color:#FFFFCC;}
.top1{ height:200px; width:80%; background-color:#eee; margin:0 auto;}
-->
</style>
</head>
<body>
<h4>利用clear自动高度,因为TOP层有下边界</h4>
<div class="con line">
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="cl"></div>
</div>
<h4>利用overflow和高度的自动高度实现,无下边界的情况</h4>
<div class="con1 line">
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
</div>
</body>
</html>
另外和这个高度自适应的相关的还有两点:
1、使用 expression 实现动态属性设置:
height: expression(this.style.height>=this.scrollHeight?'176px':this.scrollHeight+'px');
以上代码解释是超过了176px就自动延伸,否则定义为176px.
参考:http://www.nisoy.cn/article.asp?id=52
2、结合min-height和高度自适应。
主要代码如下:
min-height:560px;
_height: 560px;
原理:IE的HACK。
对于,IE6来说,不识别:min-height,对IE7来说不识别_height。这样的话,在IE6下,把上面的CSS识别为height,有一个固定高度560px并且超出部分会自动延展。对IE7来说,把上面的CSS识别成min-height也能保证一个最小的高度560px。超出最小高度时也会自动延展。
相关文章:
1、CSS技巧一:多栏/多列DIV高度自动对齐(将较短的栏高度自动拉长)
2、CSS技巧二:真正的DIV高度height自适应
3、CSS技巧三:分栏DIV中,一栏宽度固定,另一栏根据父容器自动伸缩。
所有演示文件下载:http://download.csdn.net/source/766037