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

【问题标题】：Make the top margin of an element always be the same as the computed height of another使一个元素的上边距始终与另一个元素的计算高度相同
【发布时间】：2017-01-22 15:13:30
【问题描述】：

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

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

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

【问题讨论】：

使用position: sticky。

标签： javascript css

【解决方案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>

希望对你有帮助

【讨论】：

@user3669771 对你有帮助吗:)

【解决方案2】：

解决这个问题的方法有3种；

1) 继续使用您的方法，但在页面加载/准备就绪时触发调整大小事件（保持您的调整大小逻辑到位）。这不是一个可怕的想法，主要是因为用户不会经常调整他们的窗口大小。

3) 重新设计您的标题，以便在需要包装内容时它可以作为弹出/滑动菜单使用。（最佳 UI 推荐）

2) 强制标题的内容不换行（空白：nowrap）并让用户垂直滚动（不推荐）

我个人会选择 #2，手机/平板电脑的设计最好在用户需要之前让事情不碍事。

【讨论】：