Перейти к содержанию
Dart990

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

Рекомендуемые сообщения

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

 

d0153ad19d4e.jpg

Изменено пользователем Dart990

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<script>
  $(function (){
    $('.content').height($('.sidebar').height());
  });
</script>

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

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

Изменено пользователем xds
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

$('#content').height($('#column-left').height());
то, блок контента, на странице где он короче сайдбара, подстраивается под высоту сайдбара как и задумано скриптом,

 

5bf76d341e74.jpg

 

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

 

6e0c0b164763.jpg

 

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

$('#column-left').height($('#content').height());
то всё с точностью до наоборот, там где контент короче сайдбара, то сайдбар улетает в футер (получается что футер подтягивается вверх к высоте контента), а где сайдбар короче контента то нормально =), можно ли что то с этим сделать?)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Изменено пользователем afwollis

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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(); , можно ли что то здесь сделать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×