真正的DIV高度height自适应

最新推荐文章于 2023-11-04 18:58:10 发布

Dora

最新推荐文章于 2023-11-04 18:58:10 发布

阅读量1.7k

点赞数

分类专栏： CSS 文章标签： div class css ie xhtml html

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

参考：兼容性良好的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

Dora

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
真正的DIV高度height自适应

参考：兼容性良好的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.ht
复制链接

扫一扫