CSS - 修复了导致窗口调整大小问题的导航栏答案

【问题标题】：CSS - fixed navbar causing problems on window resizeCSS - 修复了导致窗口调整大小问题的导航栏
【发布时间】：2018-02-06 06:58:13
【问题描述】：

我正在尝试创建一个始终保持在顶部的 navbar，我这样做了，但是我在它下面的页面上的内容有问题，你不能看见。我发现要解决这个问题，我需要从正文顶部留出 5% 的边距，但是每当我调整页面宽度时，它都会影响 margin-top。在调整页面宽度时，我将如何获得它以使 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

在某些属性上，百分比单位将始终使用宽度的百分比。边距是这些属性之一，因此当您设置margin-top: 5%; 时，它使用的是主体宽度的 5%。

相反，您可以使用vh。这个单位是视口高度的百分比。因此 1vh = 视口高度的 1%。

请参阅“视口百分比长度”here。

另见this question。

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

【讨论】：