2017-08-28 87 views
0

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

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; 
} 

回答

0

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

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

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

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