[Решено?..] Высота блока контента в зависимости от высота блока сайдбара

[Dart990]

Подскажите, как можно сделать, чтобы блок контента (1) был такой же высоты как блок сайдбара (2)? Дело в том, что есть страницы где мало товаров, из-за этого блок контента не дотягивает до блока сайдбара.

 

Змінено 18 червня 2015 користувачем Dart990

[RodgerFox]

я знаю 2 способа, при помощи css и при помощи js? за какой способ вы заплатите больше? 

[xds]

<script>
  $(function (){
    $('.content').height($('.sidebar').height());
  });
</script>

Где sidebar это класс блока-сайдбара, а content класс блока-контента.

Засунуть как можно ниже на странице.

Змінено 18 червня 2015 користувачем xds

[Dart990]

Такой способ работает, спасибо, только есть один интересный момент ), когда указано:

$('#content').height($('#column-left').height());

то, блок контента, на странице где он короче сайдбара, подстраивается под высоту сайдбара как и задумано скриптом,

 

 

но при этом же, на странице где он длиннее, блок контента улетает дальше сайдбара и футера,

 

 

а если указывать так:

$('#column-left').height($('#content').height());

то всё с точностью до наоборот, там где контент короче сайдбара, то сайдбар улетает в футер (получается что футер подтягивается вверх к высоте контента), а где сайдбар короче контента то нормально =), можно ли что то с этим сделать?)

[RodgerFox]

Можно, на пример спросить человека который знает, что предлагает идеальное и правильное решение под определенную задачу — это я. Хотите решение, пишите в ЛС, пока я еще -50 не заработал. И не забывайте, что 2 строчки в джава скрипте, это много вопросов при отображении странице, не ясно где подключаете и что еще выполняется до вашего "правила", а тем более будет ли он всегда и везде считать нужную высоту и показывать это вовремя, а не "скакать".

[xds]

тогда попробуйте так 

<script>
$(function (){
  $('.content').css({'min-height' : $('.sidebar').height()});
});
</script>

[Dart990]

Спасибо!, так уже ближе к истине, теперь нормально ), вот только если открывать вкладки в фильтре, то получается что блок сайдбара увеличивается, а блок контента за ним нет. Можно ли ещё как то проапгрейдить скрипт), может нужно в функцию ещё добавить id фильтра?

Змінено 24 червня 2015 користувачем afwollis

[xds]

Это вам нужно в обработчик события по которому открываются вкладки в фильтре добавить эту функцию.

[Dart990]

 

тогда попробуйте так 

<script>
$(function (){
  $('.content').css({'min-height' : $('.sidebar').height()});
});
</script>

 

Можно ли сделать так, чтобы этот скрипт был в header а не на странице категории? Дело в том что я объединяю скрипты и получается что он пропадает с категории и там уже не работает в отличии от других всех скриптов которые размещены в header.

[Dart990]

Нашел в сети ещё такой способ:

<script type="text/javascript">
  var k = jQuery.noConflict();
  function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
      thisHeight = k(this).height();
      if(thisHeight > tallest) {
        tallest = thisHeight;
      }
    });
    group.height(tallest);
  }        
  k(document).ready(function(){
    equalHeight(k(".column"));
  }); 
</script>

Но здесь тоже проблема, задал классы column блокам, всё работает, но перестает работать фильтр в сайдбаре, он есть но у него не открываются вкладки. Если из скрипта убрать - var k = jQuery.noConflict(); , то перестает работать скрипт зато работает фильтр. Дело в var k = jQuery.noConflict(); , можно ли что то здесь сделать?