根据固定标题的高度偏移内容上边距

Question

我有一个固定的标题。因此，它已从 HTML 流中移除，内容现在位于页眉下方的页面顶部。我不能只给 #main-content 一个 margin-top 因为我不知道标题的高度，因为它根据屏幕大小而变化。如何使边距顶部响应标题的高度？

<div class="header-fixed">
<h1>Logo</h1>
<nav>Home about contact</nav>
</div>
<div class="main-content">
<p>The content at the top is underneath the header
</p>
</div>

请看我的JSfiddle

Answer 1

使用jQuery，您可以使用.resize()，.css()以及.height()：

$(window).resize(function() {
    $(document.body).css("margin-top", $(".header-fixed").height());
}).resize();