时间戳

首页 > 解决方案 > 使用 CSS 调整固定菜单和页面内容

html - 使用 CSS 调整固定菜单和页面内容

问题描述

我有一个固定的菜单栏，因此当用户滚动它时它仍然位于页面顶部。

但是，我想要菜单和页面之间的间隙（下面称为 pageTest）。

我尝试将 .menu 中的边距更改为

边距：0 0 50px；0;

然而什么都没有发生？我的小提琴

HTML

<body>
<div class="menu">

</div>

<div class="content">

</div>

</body>

CSS

body {
padding: 0px;
margin: 0px;
}

.menu {  
  background-color: #9FACEC;    /* Medium blue */
  position: fixed;
  width: 100%;
  margin: 0;
  z-index: 1;
  display: flex; 
  justify-content: center;
  overflow: hidden;
  height: 100px;
}

.content {
 width: 90%;
 margin: 0 auto;
 overflow: hidden;
 background-color: yellow;
 height: 800px;
 }

标签： htmlcsscss-position

解决方案

您应该在 Menu div 中使用 top:0 并在您的情况下提供与 Nav 高度相同的边距是 100px 工作代码在这里

<body>


<div class="menu">

</div>

<div class="pageTest">


</div>

</body>

css 编辑

    body {
    padding: 0px;
    margin: 0px;
}

.menu {  
  background-color: #9FACEC;    /* Medium blue */
  position: fixed;
  width: 100%;
  margin: 0;
  z-index: 1;
  display: flex; 
  justify-content: center;
  overflow: hidden;
  height: 100px;
  top:0;
}


.pageTest {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  background-color: yellow;
  height: 800px;
  margin-top:150px
}

我希望我回答了你的问题

推荐阅读