多div 高度自适应 解决方案详解

以两列div为例，由于两边内容都可能动态增长，所以不能写死高度，这就造成高度不一致的问题了。为了实现左右高度相同，除了使用js动态修改、table外，我们可以使用多div高度自适应的技巧。

两列div框架如下：

<div class="wrap">
    <div class="left"
    </div>

    <div class="right">
    </div>

</div>

css如下：

.wrap {

        width:600px; <!--设定左右两个div加在一起的宽度;-->

        overflow:hidden; <!-- wrap 的高度会被其包含的两个div内容撑开，超过内容的部分会被隐藏。这个属性定义溢出元素内容区的内容会如何处理。-->

         ｝

.left  .right{

       float:left;//使两个div呈现一左一右的效果

       width:300px;<!--左、右两边div的宽度 -->

       margin-bottom:-10000;<!-- 无穷大-->

       padding-bottom:10000;<!-- 利用盒模型，一正一负可以将内容还是从原来的位置开始书写，同时，还具有div内背景填充的效果。padding的距离内，都有背景 -->

       background-color:#ff0000;

｝

wrap 的高度，最后等于左右高度最高的那个div的高度，因为其属性有：overflow:hidden,所以超过的部分先不显示，这个也限制了其包含的左右div的高度，都不能超过这个最高高度。

希望对您有用！