彼の隣人と同じ 'div'の高さを設定するには？

Question

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

これを実現するにはjQueryが最適なソリューションだと思います。私のバイオリンをチェックアウト：

http://jsfiddle.net/PHjtJ/

$(document).ready(function() { 

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

    static.height(dynamic.height()); 

}); 

Answer 2

あなたは解決策は、あなたがstatic列がdynamicよりも大きい場合には必要な動作に依存CSS this

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

.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 3

を行うことができます1。 [実際には、2番目のシナリオが必要だと思っています。]

注意：どちらの場合も純粋なCSSであり、高さを指定することはありません。また 、あなたは何度も何度もマージン/位置を計算することなく、自分の意志で列の幅を変更できるように、ダイナミックにしたい場合は

1. ..任意の並べ替えのマージンを指定しません列を拡大し、静的な高さ： とすることで、実際に列が常に同じ高さになるようにします。 これはCSSテーブルレイアウトのスタイリングで簡単に達成できます。その場合の ：あなたが唯一のそのコンテンツの高さに伸ばすための動的な列をしたい場合は、このFiddle（スクリプトのみ動的なコンテンツを追加するため、これは純粋なCSSのソリューションです）

2. を参照してください、と持っている静的なもの同じ高さ+スクロールバー。その場合の ：（再：スクリプトは、動的なコンテンツを追加するため、これは純粋なCSSのソリューションです）このFiddleを見ダイナミック1が長くなる場合は、両方のケースで

を、静的な列は成長します。

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>