每当新请求到来时，如何更改元素的高度

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

Answer 1

我不确定我是否完全理解这个问题，但看起来你可能过于复杂了：如果你有一个静态页眉/页脚，确保它们不与其他（非静态）重叠的最简单方法元素是给你的body 一个适当的边距。因此，如果页眉和页脚的高度都为 20 像素，我喜欢在 body 上设置 30 像素的顶部和底部边距，以确保静态元素周围有足够的空间。