固定頭重疊下面

內容我有以下的HTML，固定頭重疊下面

header { 
 
    background: #f6f6f6; 
 
    width: 100%; 
 
    min-height: 120px; 
 
    position: fixed; 
 
    z-index: 100; 
 
    top: 0; 
 
    padding: 5px 0; 
 
}

<header> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <a href="index.html"> 
 
     <img src="images/logo.png" class="img-responsive" alt=""> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</header>

正如你可以看到它是一個固定的頭，我已經給它的一個120像素最小高度。這使得標題與下面的內容重疊，並且我通過給div封裝了90px的margin-top來防止這種情況發生。

這適用於較大的佈局，但是當佈局變小並且圖像開始重新調整大小（由於.img響應類）時，其高度會降低，並且會導致其下方的空白空間。我可以寫一個媒體查詢並減少margin-top，但我想知道是否有其他方法來防止這種情況發生。

來源

2016-02-19 Vinith Almeida

歡迎來到CSS和固定定位的美妙世界。是的，它基本上被打破了。 CSS是在響應不是一個概念的時代設計的。響應性是CSS只是剛剛開始適應的問題，而且問題真正解決還需要幾年的時間。有一些解決方法和竅門，包括將頭部放置兩次，一次修復，一次作爲滾動div的一部分，位於固定部分「後面」。 –

請不要介意創建一個https://jsfiddle.net/ –

嘗試使用另一個單位作爲'％'，'em'或'rem'的邊距。用一些'@ media'來幫助。 – Core972

您可以使用JS根據頁面加載時的頁眉大小更新頁邊距。

$(function() { 
    var headHeight = $('header').outerHeight(); 

    $('.welcome-home').css({'margin-top': headHeight }); 
});

這將得到header元件的總高度，然後是大小適用，margin-top到.welcome-home。

這裏是一個小提琴：https://jsfiddle.net/13n7mpbk/ 如果您嘗試添加到標題，它會自動增加頁面加載時所需的頁邊距。

來源

2016-02-19 09:37:36

固定頭重疊下面

回答

相關問題