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

Question

我有一个固定的 header 。因此，它已从 HTML 流中移除，内容现在位于页眉下方的页面顶部。我不能只给#main-content 一个 margin-top 因为我不知道标题的高度，因为它会根据屏幕尺寸而变化。如何使 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();