四种方法解决DIV高度自适应问题

本文和你们重点讨论一下解决DIV高度自适应的方法，这里主要从四个方面来向你们介绍，相信经过本文学习你对DIV高度自适应问题会有更加深入的认识。

DIV高度自适应

关于DIV高度的自适应，一直是个让人头疼的问题，整理了一下之前总结的方法，仅表示我也玩过。

htmlcode:

<div id="container">
<dividdivid="leftSide">这边的高度自适应右侧的高度</div>
<dividdivid="rightSide">
<scripttypescripttype="text/javascript">
for(i=0;i<10;i++){
document.write(i+'<br>');
}
</script>
</div>
</div>

可用的方法大概有如下四种：

1，用absolute设置一个足够高的高度，在父级元素中清除溢出的部分,具体的csscode以下：

#container{font-size:14px;width:300px;overflow:hidden;

border:3pxsolidblue;margin:10pxauto0;
color:#fff;position:relative;}
#leftSide{width:100px;float:left;height:200000px;

left:0;top:0;position:absolute;background:gray;}
#rightSide{width:190px;float:right;

text-align:center;background:purple;}

其实这种方法并无真正的实现左右两个div等高，只是用了障眼法，利用container的overflow:hidden清除了左侧多余的部 分，以达到视觉上左右等高的目的，虽然有“白猫黑猫，逮着老鼠就是好猫”的说法，可是笔者并不着重推荐这种方法，由于给父级元素添加relative，会 带来不少没必要要的麻烦，何况只能是设置absolute的一侧自适应另外一侧的高度，并不能让两侧中任一侧去自由去适应另外一侧！

2，负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合

#container{font-size:14px;width:300px;overflow:hidden;
border:3pxsolidblue;margin:10pxauto0;color:#fff;}
#leftSide{width:100px;float:left;background:gray;

padding-bottom:9999px;margin-bottom:-9999px;}
#rightSide{width:190px;float:right;text-align:center;

background:purple;padding-bottom:9999px;
margin-bottom:-9999px;}

3，利用javascript脚本实现动态设置高度

<scripttypescripttype="text/javascript">
varleft=document.getElementById('leftSide');
varright=document.getElementById('rightSide');
if(left.offsetHeight>=right.offsetHeight){
right.style.height=left.offsetHeight+'px';
}else{
left.style.height=right.offsetHeight+'px';
}
</script>

事实上，这种办法真正意义上实现了两侧等高，而且能让两侧中任一侧去自由去适应另外一侧，可是其缺点就在于，只有当DOM加载完成后，才有会这样等高的效果，若是网速够快，这个漏洞能够忽略不计。

4，在父级元素中填充背景

CSS code以下：

#container{font-size:14px;width:300px;overflow:hidden;
border:3pxsolidblue;

margin:10pxauto0;color:#fff;

background:url(http://www.men-ideal.com/images/unit1030.jpg)repeat-y;}
#leftSide{width:100px;float:left;}
#rightSide{width:190px;float:right;text-align:center}

目前，这种方法是最流行的，一样也是一种“欺骗性”的解决办法，不过除了多使用一张图片以外，均可以堪称完美，这也是笔者极力推荐的！

 

最后：

display:table- cell属性指让标签元素以表格单元格的形式呈现，相似于td标签。目前IE8+以及其余现代浏览器都是支持此属性的，可是IE6/7只能对你说 sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。

咱们都知道，单元格有一些比较 特别的属性，例如元素的垂直居中对齐，关联伸缩等，因此display:table-cell仍是有很多潜在的使用价值的，虽然说IE6/7不支持此属性， 可是幸运的是，IE6/7一些乱糟糟的属性与渲染，咱们能够其余方法实现一样或是相似的效果。 

与其余一些display属性类 似，table-cell一样会被其余一些CSS属性破坏，例如float, position:absolute，因此，在使用display:table-cell与float:left或是position:absolute 属性尽可能不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱 脱的一个td标签元素了。