[英]How can I change the height of an element whenever the new request comes
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.我有一个固定定位的导航栏和页脚,其动态高度取决于 window 的大小,所以我为每个导航栏和页脚制作了一个 div,并使其高度与导航栏和页脚相同,这样主要区域就不需要重叠。 It worked when I loaded a page first, and it worked when I resized window.
当我首先加载页面时它起作用了,当我调整 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?
但是,如果我从 index.html.erb 到 show.hteml.erb 的 go 到 show.hteml.erb,或者做一些分页,那些 div 的高度变为 0。有没有办法解决这个问题?
my _navbar.html.erb is as below我的 _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>
my application.js is as below我的 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`);
});
});
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.我不确定我是否完全理解这个问题,但看起来你可能过于复杂了:如果你有一个 static 页眉/页脚,确保它们不与其他(非静态)元素重叠的最简单方法是给你的
body
适当的余量。 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.因此,如果 header 和页脚的高度都为 20 像素,我喜欢 go 的顶部和底部边距为 30 像素,以确保在
body
周围有足够的空间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.