如何設置與鄰居相同的“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());

});

Answer 3

在static列大於dynamic列的情況下，解決方案取決於您想要的行為。 [我實際上認為你想要第二種情況。]

注意：這兩種情況都是純 CSS，沒有指定任何高度。 此外，不指定任何類型的邊距，因此您可以隨意更改列的寬度，而無需一次又一次地計算邊距/位置..

1. 如果您希望動態列放大，並作為靜態高度：所以您實際上希望列始終具有相同的高度。 這可以通過 CSS 表格布局樣式輕松實現。 在這種情況下：請參閱此Fiddle （該腳本僅用於添加動態內容，這是一個純 CSS 解決方案）

2. 如果您希望動態列僅拉伸到其內容高度，而靜態列具有相同的高度 + 滾動條。 在這種情況下：請參閱此Fiddle （再次：該腳本僅用於添加動態內容，這是一個純 CSS 解決方案）

在這兩種情況下，如果動態列變長，靜態列就會增長。

Answer 4

使用 Javascript/jQuery 查找哪個框的高度最大。 然后為所有 div 設置相同的高度。

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var description = jQuery("div.description");
        var big =0;
        description.each(function(index, el) {
            if(jQuery(el).height() > big)
                big =jQuery(el).height(); //find the largest height
        });

        description.each(function(index, el) {
            jQuery(el).css("min-height", big+"px"); //assign largest height to all the divs
        });
    });
</script>