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

Posted 2023-05-09

【中文标题】每当新请求到来时，如何更改元素的高度

【英文标题】：How can I change the height of an element whenever the new request comes

【发布时间】：2020-10-10 13:32:35

【问题描述】：

我有一个固定定位的导航栏和页脚，它们的高度取决于窗口大小，因此我为每个导航栏和页脚制作了​​一个 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').offsetHeightpx`);
    this.getElementById('footer-margin').setAttribute("style", `height:$this.getElementById('footer-id').offsetHeightpx`);
  );

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

【参考方案1】：

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

【讨论】：

感谢您的回答，但我的导航栏和页脚具有动态高度，具体取决于窗口大小。这就是问题所在。