Question

我有一个固定的标题。因此，它已从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();

Answer 2

使用调整大小事件

$(window).resize(function(){
var height = $('.header-fixed').height();//take the header height
$('.main-content').css({'margin-top':height});//alter the margin of the wrapped content
}).trigger('resize');//trigger the margin resize when page is loaded

Answer 3

感谢您的帮助，我使用了它：

<script>
$( document ).ready(function() {
$(window).resize(function() {
    $('#main-content').css("margin-top", $(".header-fixed").height());
}).resize();
});
</script>

根据固定标题

3 个答案: