Jump to content
Sign in to follow this  
Dart990

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

Recommended Posts

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

 

d0153ad19d4e.jpg

Edited by Dart990

Share this post


Link to post
Share on other sites

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

  • +1 1

Share this post


Link to post
Share on other sites
<script>
  $(function (){
    $('.content').height($('.sidebar').height());
  });
</script>

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

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

Edited by xds
  • +1 1

Share this post


Link to post
Share on other sites

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

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

 

5bf76d341e74.jpg

 

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

 

6e0c0b164763.jpg

 

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Edited by afwollis

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.