如何设置与他的邻居相同的'div'高度？

Question

我使用bootstrap作为我的CSS框架.现在我在左侧div中有一些动态内容,在右侧div中有一些静态内容.我希望右侧div自动更改的高度基于左侧div的高度.那可能吗？

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span5 offset1">
    <div class="well">
      Dynamic Content
    </div>
  </div>
  <div class="span5">
    <div class="well" style="height: 330px; overflow-x: hidden; overflow-y: scroll;">
      Static Content
    </div>
  </div>
</div>

Answer 1

你可以做到这一点

<div class="wrapper">
    <div class="dynamic">
        Dynamic Line <br />
        Dynamic Line <br />      
        Dynamic Line <br />
        Dynamic Line <br />      
        Dynamic Line <br />
        Dynamic Line <br />      
        Dynamic Line <br />
        Dynamic Line <br />      
    </div>
    <div class="static">
        Static<br />
        Static<br />        
    </div>
</div>

CSS

.wrapper {
    position: relative;
    width: 400px;
    overflow: auto;
}

.dynamic {
    position: relative;
    background-color: yellow;
    width: 200px;
}

.static {
    position: absolute;    
    background-color: orange;
    width: 200px;
    float: left;
    left: 200px;
    top: 0px;
    bottom: 0px;
    right: 0px;
}

Answer 2

我认为jQuery是实现这一目标的最佳解决方案.看看我的小提琴:

http://jsfiddle.net/PHjtJ/

$(document).ready(function() {

    var dynamic = $('.dynamic');
    var static = $('.static');

    static.height(dynamic.height());

});