CSS - 固定的導航欄導致窗口調整大小問題

Question

我想創建一個navbar始終停留在頂部，我做了，但我遇到的問題與頁面上的內容下，它可以沒有看到它。我發現要解決這個問題，我需要從身體頂部留出5％的餘量，但每當我調整頁面寬度時，它都會影響到margin-top。我怎樣才能得到它，以便在調整頁面寬度時，頁邊距保持不變？我想要的一個例子是Instagram導航欄（網站），就像照片不會重疊固定的navbar並且在頁面調整大小時它仍保持相同的頂部邊距。

HTML

<div> 
    <div className="menu"> 
     <div className="left"> 
      <h1>PostNote</h1> 
     </div> 
     <div className="right"> 
      <span className="menu-item"><Link to="/">Home</Link></span> 
      <span className="menu-item"><Link to="/searchNotes">Notes</Link></span> 
      <span className="menu-item"><Link to="/addNote">Add a Note</Link></span> 
      <span className="menu-item"><Link to={`/users/${Meteor.userId()}`} >My Profile</Link></span> 
     </div> 
    </div> 
</div> 

CSS

body{ 
    padding-left: 20%; 
    padding-right: 20%; 
    margin-top:5%; 
} 
.menu{ 
    background: #F1F1F1; 
    width:100%; 
    height:10vh; 
    position: fixed; 
    left:0px; 
    top:0px; 
    z-index: 10; 
} 
.menu-item{ 
    margin:5px; 
    font-size:1.4em; 
    color:black; 
} 

Answer 1

在某些性質，比例單元將始終使用寬度的百分比。保證金是這些屬性之一，因此當您設置margin-top: 5%;時，它使用身體寬度的5％。

取而代之，您可以使用vh。該單位是視口高度的百分比。因此1vh =視口高度的1％。

請參閱'視口百分比長度'here。請參閱this question。

body{ 
    padding-left: 20%; 
    padding-right: 20%; 
    margin-top:5vh; 
}