如何避免position fixed导航栏覆盖单页网站页面顶部内容

核心就是利用calc()配合盒模型属性，既保留页面100vh的高度，又给固定导航栏留出空间，同时避免布局混乱。给你两种可靠的实现方案：

方案一：padding + box-sizing（推荐） #

这种方法不会改变页面容器的总高度，通过内边距把内容向下推，同时用box-sizing: border-box确保内边距不会让容器高度超出100vh：

/* 固定导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 999; /* 确保导航栏在内容上方 */
  background: #ffffff; /* 按需设置背景色，避免内容透过导航显示 */
}

/* 每个页面的容器样式 */
.page-container {
  box-sizing: border-box; /* 关键：让padding包含在容器高度内 */
  height: 100vh;
  padding-top: 50px; /* 给导航栏预留50px的顶部空间 */
}

方案二：margin + calc() #

如果你的页面容器不适合用padding（比如内部元素有margin可能受影响），可以用外边距配合calc()直接调整容器高度：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 999;
  background: #ffffff;
}

.page-container {
  margin-top: 50px; /* 把容器向下推，避开导航栏 */
  height: calc(100vh - 50px); /* 用calc减去导航栏高度，保持容器总高度为100vh */
}

为什么之前的操作会打乱布局？ #

你之前单独加margin/padding/top但没配合calc()或box-sizing，要么导致容器总高度变成100vh + 50px（出现垂直滚动条），要么只是偏移了内容但高度没调整，导致页面底部被截断，从而打乱整体布局。

内容的提问来源于stack exchange，提问作者nemokris