Как установить высоту " div " такой же с его соседом?

Я использую 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>

9
css css3

4 ответов

Я думаю, что jQuery-лучшее решение для достижения этого. Проверьте мою скрипку:

http://jsfiddle.net/PHjtJ/

$(document).ready(function() {

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

    static.height(dynamic.height());

});
6

вы могли бы сделать этой

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

решение зависит от поведения в случае, когда больше, чем dynamic один. - "Я действительно думаю, что ты хочешь второй сценарий.]

Примечание: оба случая являются чистыми CSS, и без указания какой-либо высоты вообще. кроме того, не указывая маржу любого рода, вы можете изменить ширину столбца по своему желанию, без необходимости снова и снова вычислять маржу/позицию..

  1. Если вы хотите динамический столбец для увеличения, и быть как статическая высота: таким образом, вы действительно хотите, чтобы столбцы всегда были одинаковой высоты. и это может быть легко достигнуто с помощью стиля компоновки таблицы CSS. в таком случае: смотрите это Скрипка (скрипт предназначен только для добавления динамического контента, это чистое решение CSS)

  2. Если вы хотите, чтобы динамический столбец растягивался только на высоту содержимого, а статический-на ту же высоту + скроллер. в этом случае: см. это Скрипка (опять же: скрипт предназначен только для добавления динамического контента, это чистое решение CSS)

в обоих случаях статический столбец растет, если динамический становится длиннее.

2

используйте Javascript / jQuery, чтобы найти, какой ящик имеет самую большую высоту. Затем установите одинаковую высоту для всех divs.

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