How can I change the height of an element whenever the new request comes

Question

I have a fixed positioned navbar and footer which have dynamic height depending on window size, so I made a div for each and made their height the same as navbar and footer so that the main area doesn't need to be overlapped. It worked when I loaded a page first, and it worked when I resized window. However If I go from index.html.erb to show.hteml.erb, or do some pagination, those div's height becomes 0. Is there any way to solve this problem?

my _navbar.html.erb is as below

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

my application.js is as below

$(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

I'm not sure I fully understand the problem but it looks like you might be overcomplicating things: If you have a static header/footer, the easiest way to make sure they don't overlap with other (non-static) elements is to give your body an appropriate margin. So if both header and footer have a height of, say, 20px, I like to go for a top and bottom margin of 30px on the body to make sure there's enough room around the static elements.