javascript - 新しいリクエストが来るたびに要素の高さを変更するにはどうすればよいですか

Question

ウィンドウのサイズに応じて動的な高さを持つ固定配置のナビゲーション バーとフッターがあるため、それぞれに div を作成し、それらの高さをナビゲーション バーとフッターと同じにして、メイン領域を重ねる必要がないようにしました。最初にページをロードしたときに機能し、ウィンドウのサイズを変更したときに機能しました。ただし、index.html.erb から show.hteml.erb に移動するか、ページネーションを行うと、それらの div の高さが 0 になります。この問題を解決する方法はありますか?

私の _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`);
  });
});