0

Есть две колонки контента

<div id="main-bar"> 
...
</div>
<div id="side-bar"> 
...
</div>
Мне нужно чтобы при разнице высот двух колонок, высота одного из элементов второй колонки изменялась, и занимала пустое место.

Пытаюсь так:

 var mainBar = $('#main-bar').height();
 var sideBar = $('#side-bar').height();
 var hHelper = (mainBar - sideBar);
 if (mainBar > sideBar) {
  $('.sticky-helper').height(hHelper);
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Почему-то var mainBar = $('#main-bar').height(); определяет высоту не правильно. В консоль выводится одно число, в разметке показывается другое. Внутри элемента много вложенных элементов с другими объектами.

3
  • .outerHeight(true) пробовали?
    – Konst
    24 июл 2019 в 11:20
  • @Konst Да, пробовал. грешу на то, что там есть блок внешней рекламы, который почему-то не учитывается в высоте. Не знаю уже что делать 25 июл 2019 в 1:24
  • Можно еще поместить оба блока в общий блок с display: flex; — высота одного будет подстраиваться под друого → jsfiddle.net/OPTlMUS/hc74kotj 27 июл 2019 в 18:48

1 ответ 1

3

Запускайте код не по ready а по load, тогда будет нормально. После ready еще не успела загрузиться реклама\картинки, и их высота не высчитывается. $(window).on("load", function () { /* тут Ваш код */ })

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.