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

我有一个固定的标题。因此，它已从 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 https://jsfiddle.net/gapugs8u/1/

通过 jQuery，您可以使用.resize() https://api.jquery.com/resize/, .css() http://api.jquery.com/css/, and .height() http://api.jquery.com/height/:

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