根据固定标头的高度偏移内容的上边距 [英] Offset content top margin based on height of fixed header

问题描述

我有一个固定的标题.因此，它已从HTML流程中删除，并且内容现在位于页眉顶部的页面顶部.我不能只给#main-content一个页边距，因为我不知道标题的高度，因为标题的高度取决于屏幕尺寸.如何使页眉顶部响应页眉的高度?

I have a header which is fixed. Therefore it has been taken out of the flow of the HTML and the content now sits at the top of the page underneath the header. I can't just give #main-content a margin-top because I don't know the height of the header because it varies depending on screen size. How can I make the margin-top responsive to the height of the header?

<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

推荐答案

使用jQuery，您可以使用 .resize() ， .css() 和

With jQuery, you can use .resize(), .css(), and .height():

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

这篇关于根据固定标头的高度偏移内容的上边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！