javascript - 使一个元素的上边距始终与另一个元素的计算高度相同

Question

我有一个固定的标题，这意味着内容会丢失在它下面，除非我给它一个等于标题高度的上边距。这很好，直到标题改变大小(由于浏览器窗口的大小改变)。

目前我有一个关于窗口调整大小的事件监听器，它获取标题的计算高度并将其应用于内容的 style.marginTop。这样做的问题是我需要它发生在页面加载时，而不仅仅是窗口调整大小，并且在我更改浏览器窗口大小时对标题的高度发出如此多的请求似乎是不好的做法。

谁有更好的主意？感谢您的帮助。

Answer 1

headercheck();
window.addEventListener('resize',headercheck);
function headercheck(){

var headerheight=document.getElementById("header").offsetHeight;
//console.log(headerheight);gives height of header
document.getElementById("content").style.top=headerheight+"px";
}

#header{background:#676767;
padding:20px;
box-sizing:border-box;
position:fixed;
width:100%;}
#content{
position:relative;

  }

<div id="header">
this is the header 
</div>
<div id ="content">
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>

希望对你有帮助