Как я могу изменить высоту элемента всякий раз, когда приходит новый запрос

Question

У меня есть фиксированная позиционная панель навигации и нижний колонтитул, у которых есть динамика c высота в зависимости от размера окна, поэтому я сделал div для каждого и сделал их высоту такой же, как панель навигации и нижний колонтитул, чтобы основная область не нуждалась в быть перекрытыми. Это сработало, когда я сначала загрузил страницу, и сработало, когда я изменил размер окна. Однако если я go от index. html .erb к show.hteml.erb или сделаю некоторую разбивку на страницы, высота этих div станет 0. Есть ли способ решить эту проблему?

my _navbar. html .erb как ниже

<nav class="fixed-top navbar navbar-expand-lg navbar-dark" style="background-color: #202020;" id="nav-id">
...
</nav>
<div id="nav-margin">
</div>

мое приложение. js как показано ниже

$(document).on('turbolinks:load', function() {
  window.addEventListener('load', () => {
    this.getElementById('nav-margin').setAttribute("style", `height:${this.getElementById('nav-id').offsetHeight}px`);
    this.getElementById('footer-margin').setAttribute("style", `height:${this.getElementById('footer-id').offsetHeight}px`);
  });

  window.addEventListener('resize', () => {
    this.getElementById('nav-margin').setAttribute("style", `height:${this.getElementById('nav-id').offsetHeight}px`);
    this.getElementById('footer-margin').setAttribute("style", `height:${this.getElementById('footer-id').offsetHeight}px`);
  });
});

Answer 1

Я не уверен, что полностью понимаю проблему, но похоже, что вы слишком усложняете вещи: если у вас есть stati c header / footer, самый простой способ убедиться, что они не перекрываются с другими (не -stati c) должны дать вашему body соответствующую маржу. Поэтому, если и верхний, и нижний колонтитулы имеют высоту, скажем, 20 пикселей, мне нравится go для верхнего и нижнего поля 30 пикселей на body, чтобы убедиться, что вокруг элементов stati c достаточно места.