可變高度的固定標頭

當文檔寬度大於760像素時，我有一個60px高度的標頭。所以，身體顯示在標題正下方並沒有問題，但是當寬度變得更小時，其高度爲兩條線（120px），因此身體部分隱藏在頂部。可變高度的固定標頭

我該如何解決這個問題？

這裏是我使用的代碼：

.main_header { 
    width:100%; 
    height:auto !important; 
    background-color:#F2F2F2; 
    border-bottom:1px solid #CCC; 
    position:fixed; 
    top:0px; 
    z-index:100; 
} 
.main_body { 
    margin:70px auto; 
}

注：頁面響應。

來源

2014-10-11 Apalabrados

變化媒體查詢。主要-body'保證金？ – 2014-10-11 18:57:59

太棒了！非常感謝。 – Apalabrados 2014-10-11 19:01:13

您可以先設置.main-body的邊距爲120px，這將適用於所有窗口大小。然後，您可以使用媒體查詢覆蓋特定寬度的邊距。注意：使用您正在使用的CSS速記，main-body頂部和底部邊距將受到影響。

<style> 
.main_body { 
    margin:120px auto; 
} 

@media(min-width: 761px){ 
    .main_body { 
     margin:70px auto; 
    } 
} 
</style>

媒體查詢文件：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

來源

2017-07-20 11:02:47

可變高度的固定標頭

回答

相關問題