HTML, CSS, jQuery - Высота разделов в одном столбце в зависимости от высоты разделов в другом столбце

#jquery #html #css #height #equals

#jquery #HTML #css #высота #равно

Вопрос:

У меня следующая проблема. Рассмотрим этот пример html-кода:

 <html>
<body>
<div id="leftColumn">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
</div>
<div id="rightColumn">
  <div id="div1sidebar"></div>
  <div id="div2sidebar"></div>
  <div id="div3sidebar"></div>
  <div id="div4sidebar"></div>
</div>     
</body>
</html>

Теперь — высота разделов в левом столбце варьируется в зависимости от содержимого внутри них. Я бы хотел, чтобы разделы в правом столбце были той же высоты, что и разделы в левом столбце — таким образом, высота «div1sidebar» зависит от «div1», «div2sidebar» зависит от «div2» и т.д.

Есть ли способ достичь этого только с помощью css? Или, например, с помощью jQuery? Метод «Искусственных столбцов» (http://www.alistapart.com/articles/fauxcolumns /) не вариант, потому что речь идет не о родительском фоне, а о высоте самих разделов.

РЕДАКТИРОВАТЬ: И еще одно — высота разделов в левом столбце изменяется «на лету», без перезагрузки сайта.

Ответ №1:

Вы можете float расположить элементы слева и справа и использовать repeated clear: both , чтобы выровнять их, как здесь: http://jsfiddle.net/eNRhQ/2 /

Это гарантирует, что соответствующие разделы всегда выровнены, но, как вы можете видеть по границам, их высоты на самом деле не одинаковы. (Это может понадобиться вам только для целей стилизации …)

Если вы действительно хотите выровнять свои разделы программно, вы можете сделать это следующим образом в jQuery:

 var left = $('#left-element');
var right = $('#right-element');

var maxHeight = Math.max(left.height(), right.height());

left.height(maxHeight);
right.height(maxHeight);

Но я бы позаботился о том, чтобы страница также выглядела нормально без какого-либо Javascript

1. Хм, спасибо за вашу помощь, но в этом примере jsfiddle html немного отличается — я не могу изменить его таким образом; в моем случае все левые разделы должны быть в одном левом столбце, а все правые разделы должны быть в правом столбце. Но в любом случае, я сделал это с: $("#div1sidebar").css({height: $("#div1").height() }); Хотя, все еще остается проблема с динамическим изменением размера. Почему этот код не работает? — $("#div1").resize(function() { $("#div1sidebar").css({height: $("#div1").height() }); });

Ответ №2:

Это одна из тех странных вещей, которые нельзя сделать в CSS.

Я использую этот плагин, и он отлично работает,http://www.cssnewbie.com/equalheights-jquery-plugin /

Если вы хотите, чтобы это оставалось актуальным после изменения размера, вы можете сделать:

 $(".columns").resize(function(){
  $(".columns").equalHeights();
});

http://api.jquery.com/resize/

1. Выглядит многообещающе. Пожалуйста, скажите мне — есть ли способ использовать это также с динамическим изменением размера одного div?

2. Боюсь, это не работает. Изменение размера разделов в любом случае не изменяет их высоту.