html - 根据另一个 div 高度增加 div 高度

Question

我有一个主要的 div，其中我放置了 3 个 div（左、中、右）。我的要求是，当中心 div 自动增加高度时，左右 div 的高度应该与中间的一样增加。我全力以赴完成这项任务，但我做不到。请让我知道应该使用哪些 CSS 属性.这是小提琴

<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 缩放 div

也试试这个演示

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; }

演示

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>

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