CSS - ウィンドウのサイズ変更で問題が発生する

Question

navbarを作成しようとしていますが、これは常に上に表示されますが、下にあるページのコンテンツに問題があります。それを見ない。これを修正するには、本文の上部から5％のマージンが必要でしたが、ページの幅を変更する度にmargin-topに影響します。ページの幅をリサイズするとき、余白部分が同じになるように、どうすればよいでしょうか？私が欲しいものの一例は、Instagram navbar（ウェブサイト）です。写真が固定された形で重なっていないように、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

、パーセント単位は常に幅の割合を使用します。マージンはこれらのプロパティの1つで、margin-top: 5%;を設定すると、ボディの幅の5％が使用されます。

代わりにvhを使用できます。この単位は、ビューポートの高さの％です。したがって、1vh =ビューポートの高さの1％。

'ビューポートパーセンテージの長さ' hereを参照してください。

this questionも参照してください。

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