基於固定標頭高度的偏移量內容頂部邊距

我有一個固定的標頭。因此，它已經從HTML的流程中移出，並且內容現在位於頁眉下方的頁面頂部。因爲我不知道標題的高度，因爲它根據屏幕大小而變化，所以我不能只給主要內容一個頁邊距。我怎樣才能使邊緣頂部響應頭部的高度？基於固定標頭高度的偏移量內容頂部邊距

<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

來源

2016-05-18 Buts

您可以使用javascript！ – madalinivascu

請提供一些代碼，例如通過jsfiddle.net。如果你知道尺寸，你可以簡單地使用'margin- *'或'padding- *'。否則，Javascript。 –

其次請求一個jsfiddle。「標題取決於網站[原文]寬度」是不明確的。 – Matt

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

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

來源

2016-05-18 04:12:14 4castle

請您進一步解釋我是Jquery的新手。我已經包含一個JSfiddle，它具有特定的類名和ID – Buts

它將一個事件處理程序添加到'window'的'onresize'中，以便當頁面最初加載或調整大小時，它設置頁面的'margin-top'成爲'header-fixed'的像素高度。那有意義嗎？如果您尚未正式學習jQuery，我會推薦[W3Schools jQuery教程]（http://www.w3schools.com/jquery/default.asp）。 – 4castle

使用resize事件

$(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

來源

2016-05-18 04:11:58 madalinivascu

感謝您的幫助我得到它使用：

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

來源

2016-05-18 04:57:12 Buts

基於固定標頭高度的偏移量內容頂部邊距

回答

相關問題