Равный размер боковой панели и контента с использованием jQuery

Question

У меня есть несколько

<div class="sidebar"></div><div class="content"></div>

Фоны боковой панели и контента различны. Таким образом, если они не равны по высоте, отображается страница сзади. Я хочу выровнять их высоту, используя jQuery. Я сам попробовал, но не получилось.

Примечание: Боковая панель и содержимое - это пара . Таким образом,

 $('.sidebar').height() > $('.content').height() ? $('.content').height($('.sidebar').height()) : $('.sidebar').height( $('.content').height());
});

не сработает. Здесь всегда первая боковая панель сравнивается с первым контентом (надеюсь, я прав).

Answer 1

Используйте Искусственную колонку Техника CSS для решения этой проблемы.

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

Лично я чувствую, что пометив решение JavaScript, помеченное как принятое, отправляет неправильное сообщение людям, которые наткнулись на эту страницу и считают, что это лучшее решение их проблемы. Тот факт, что у вас есть несколько боковых панелей, не мешает вам использовать это решение. Учитывая следующее:

<div class="contentSidebarPair">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

Вы можете использовать следующие стили:

/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
   #FFF is the bgcolor of your content */
div.contentSidebarPair {
    background: #FFF url('sidebar.gif') repeat-y top left;
    width: 800px;
    zoom: 1; /* For IE */
}

/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.sidebar {
    float: left;
    width: 200px;
}

div.content {
    float: left;
    width: 600px;
}

Там! Просто и эффективно. Абсолютно нулевой JavaScript. И если вы хотите создать более сложные макеты (жидкостные макеты), вы можете адаптировать эту технику, используя background-position. учебник доступен здесь .

Answer 2

Во-первых, убедитесь, что вы эффективно очищаетесь. Примерно так должен оставить вас с сайтом, который можно использовать без JavaScript.

КАК ТОЛЬКО ВЫ СДЕЛАЛИ, что-то вроде этого должно работать:

var sidebarHeight = $("#sidebar").height();
var bodyHeight = ( $("#content").height() );

if ( sidebarHeight > bodyHeight ) {
  $("#wrapper").height(sidebarHeight);
  $("#content").height(sidebarHeight);
  }
else if (bodyHeight > sidebarHeight) {
  $("#sidebar").height(bodyHeight);
  $("#wrapper").height(bodyHeight);
  };

Обратите внимание, что я предполагаю, что это содержится в оболочке div # или в чем-то еще.

Answer 3

Вот новая версия, которая работает, если пара контента и боковой панели является одноуровневыми (например, фрагмент кода), и пары не находятся внутри одного узла, как в:

<div>
  <div class="sidebar"></div><div class="content"></div>
</div>
<div>
  <div class="sidebar"></div><div class="content"></div>
</div>


  $(document).ready(function(){
    $('.content').each(function(){
      var sidebar = $(this).siblings('.sidebar');
      sidebar.height() > $(this).height() ? $(this).height(sidebar.height()) : sidebar.height($(this).height());
    });
  });

Если содержимое и боковая панель - все братья и сестры, как в:

  <div>
    <div class="sidebar"></div><div class="content"></div>
    <div class="sidebar"></div><div class="content"></div>
  </div>

вот еще одно решение, основанное на местонахождении братьев и сестер:

$('.content').each(function(){
  var sidebar = $(this).prev('.sidebar');
  sidebar.height() > $(this).height() ? $(this).height(sidebar.height()) : sidebar.height($(this).height());
});

Answer 4

Я бы порекомендовал вам решить эту проблему с помощью CSS. Вот некоторые из первых страниц на эту тему, которые я нашел в Google: один , два