我们经常会用到div高度自适应，但是经常不兼容啊，下面我来介绍div高度自适应方法总结，有需要的朋友可参考参考。
看下面代码:
| 代码如下 |
|
|
<style type="text/css">
.mytest
{
width:100px;
height:100px;
border:1px solid green;
}
</style>
<div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也因此蒙上巨大</div>
</body>
</html>
|
以上代码中固定了div的高度为100px，如果内容的高度超过100px的话，除了在IE6下能够达到高度自适应，其他浏览器都会出现内容溢出的现象，显示不能够达到我们想要的效果，下面就来修改一下代码 。
| 代码如下 |
|
|
<style type="text/css">
.mytest
{
width:100px;
height:auto!important;
height:100px;
min-height:100px;
border:1px solid green;
}
</style>
|
<div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也因此蒙上巨大阴</div>
</body>
</html>以上代码通过运用!important和min-height属性实现了各个浏览器都能够达到高度自适应效果。
上面都是介绍的是div中都是文本内容的情况，但是还有可能是div中存有子div的情况，下面简单介绍一下此种情况。先看一实例:
| 代码如下 |
|
|
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
}
.children
{
width:200px;
height:200px;
background-color:green;
}
</style>
<div class="parent">
<div class="children"></div>
</div>
|
以上代码中，父元素只规定了宽度没有规定高度，子元素在正常的文档流中，所以子元素能够将父元素撑开。
再看下面这一实例:
| 代码如下 |
|
|
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
</style>
<div class="parent">
<div class="children"></div>
</div>
|
从上面代码的运行可以看出，父元素并没有被撑开，这个是因为子元素float属性值设置为left，从而脱离了文档流。如果想让上面的父元素达到高度自适应，就要清除子元素的浮动。修改代码如下:
| 代码如下 |
|
|
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
overflow:hidden;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
</style>
<div class="parent">
<div class="children"></div>
</div>
|
以上代码通过给父元素的样式中添加overflow:hidden即可清除浮动。
如果说父元素就像最开始的例子一样，固定了高度，并且还要实现高度自适应效果，就可以参阅元素中内容是文本的情况，解决方法是一样的。代码如下:
| 代码如下 |
|
|
<style type="text/css">
.parent
{
border:2px solid red;
width:200px;
height:auto!important;
height:100px;
min-height:100px;
}
.children
{
width:200px;
height:200px;
float:left;
background-color:green;
}
.clear
{
clear:both;
}
</style>
<div class="parent">
<div class="children"></div>
<div class="clear"></div>
</div>
|
上面讲述的都是css,我另外介绍一通过js的方法，原理是js获取两个子div的高度然后比较哪个大，然后分别设置div的高度,下面的实例演示3列式的。
js代码如下：
| 代码如下 |
|
|
<script>
var a=Math.max(document.getElementById("left").offsetHeight,document.getElementById("center").offsetHeight,document.getElementById("right").offsetHeight); //获取3个div的最大高度
document.getElementById("left").style.height = a + "px";
document.getElementById("center").style.height = a + "px";
document.getElementById("right").style.height = a + "px";
</script>
|
需要注意的是这个js代码请放在页面底部
