Question

我正在尝试创建一个始终保持在顶部的 navbar ，这是我所做的，但我在页面上的内容遇到问题，你可以＆＃39;看到了。我发现为了解决这个问题，我需要从正文顶部获得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;
}

Answer 1

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

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

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

另见this question。

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

CSS - 固定导航栏导致窗口大小调整问题

1 个答案: