14

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>

4

4 に答える 4

8

あなたはこれを行うことができます

<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;
}
于 2013-09-22T05:27:23.907 に答える
6

これを実現するには、jQuery が最適なソリューションだと思います。私のフィドルをチェックしてください：

http://jsfiddle.net/PHjtJ/

$(document).ready(function() {

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

    static.height(dynamic.height());

});
于 2013-09-22T15:19:08.273 に答える
2

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>
于 2014-12-04T06:53:20.410 に答える
2

static解決策は、列がそれよりも大きい場合に必要な動作によって異なりますdynamic。[実際には、2 番目のシナリオが必要だと思います。]

注意: どちらの場合も純粋な CSS であり、高さはまったく指定されていません。また、任意の並べ替えのマージンを指定しないため、マージン/位置を何度も計算する必要なく、列の幅を自由に変更できます..

  1. 動的な列を拡大して静的な高さにしたい場合：実際には、列を常に同じ高さにしたいのです。これは、CSS テーブル レイアウト スタイルを使用して簡単に実現できます。その場合: このFiddleを参照してください(スクリプトは動的コンテンツを追加するためのものであり、これは純粋な CSS ソリューションです)

  2. 動的列をそのコンテンツの高さまでのみ伸ばし、静的列を同じ高さ + スクローラーにする場合。その場合: このFiddleを参照してください(繰り返します: スクリプトは動的コンテンツを追加するためのものであり、これは純粋な CSS ソリューションです)

どちらの場合も、動的列が長くなると静的列が大きくなります。

于 2013-09-22T10:39:29.833 に答える