Question

我有一个主要的Div，在那里我放置了3个div（左，中，右）。我的要求是，当中心div自动增加高度时，左右div的高度应该与中间一样增加。我总是把这个任务付诸实践，但是我无法做到。请让我知道应该使用哪些CSS属性这是Fiddle

<div class="mainDiv">
<div class="left">Left</div>
<div class="center">Center</br>Center<br/>Center<br/></div>
<div class="right">Right</div>
</div>

Answer 1

http://jsfiddle.net/pfqpR/

 .mainDiv { 
      height: auto;
 }
 .left, .right { 
      height: 100%;
 }

Answer 2

试试这个

http://jsfiddle.net/ZkXak/2/

CSS

     .mainDiv{ position: relative;}
    .left{ position: absolute;background:red; left: 0; top: 0; width: 100px;

        float: left;

        z-index: 100;
        height:100%;
    }

.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px; height:100%; }
.center{ margin: 0 100px;background:green;  height:100%;}

CSS scale divs in float layout

尝试此演示

http://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

用于bottom :0; 根据添加到@Mr_Green

就像这样

.mainDiv{ position: relative; height: auto;}
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; bottom:0;}
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;bottom:0; }
.center{ margin: 0 100px;background:green; }

<强> Demo

Answer 4

您可以使用javascript获取中心div的高度并设置为左右div。

<script type="text/javascript">
    // get height of center div
    var heightCenterDiv =  document.getElementById('id').clientHeight;

    //set height of left and right div
    document.getElementById('leftdiv -id').style.height = heightCenterDiv+"px";
    document.getElementById('right -id').style.height = heightCenterDiv+"px";
</script>

对于您的代码，您可以使用class而不是div id。

根据其他div高度增加div高度

4 个答案: