我有一个固定的定位导航栏和页脚，所以我做了一个div为每一个，并使他们的高度与导航栏和页脚相同，这样主区域就不需要重叠。 当我首先加载一个页面时，它是有效的，当我调整窗口的大小时，它也是有效的。 但是，如果我从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>

我的application.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`);
  });
});