如何实现固定Header搭配100vh全屏区块及锚点跳转？

我来帮你搞定这个固定Header和全屏区块的布局问题！先理清你遇到的两个核心问题的根源：

问题根源分析 #

1. body加padding-top导致首屏空白：固定定位的header是脱离文档流的，它不会占据页面实际空间，给body加padding-top只会让整个页面内容下移，首屏自然出现空白，没法让区块顶在header下方。
2. 区块背景溢出：你给区块设置height:77vh + padding-top:23vh，默认盒模型（content-box）会把padding算在元素总高度之外，区块实际总高度变成了77vh + 23vh = 100vh，但header固定在顶部，区块背景会延伸到padding区域（也就是header的位置），看起来就像背景溢出了。

解决方案 #

给你两种可行的调整方案，按需选择：

方案一：统一盒模型 + 视口高度适配（推荐）

这个方案能完美解决背景溢出，同时让区块自然顶在header下方：

首先给全局元素设置统一盒模型，让padding和border都包含在元素宽高内：

* { 
  margin:0; 
  padding:0; 
  box-sizing: border-box; /* 关键：让padding不再额外增加元素总高度 */
} 

然后调整区块样式，用min-height:100vh确保区块占满视口，同时用padding-top避开固定header：

.section_a, .section_b {
  min-height: 100vh; /* 确保区块至少占满整个视口高度 */
  padding-top: 23vh; /* 留出header的高度，让内容显示在header下方 */
  width: 100%;
}

最后给header加个z-index，确保它始终在区块上方：

header {
  /* 原有样式不变 */
  z-index: 999;
}

方案二：处理锚点跳转遮挡问题

用锚点跳转到区块时，默认会让区块顶部对齐视口顶部，但固定header会挡住这部分内容，给区块加scroll-margin-top就能修正：

.section_a, .section_b {
  scroll-margin-top: 23vh; /* 跳转时，让区块顶部留出header的高度 */
}

完整调整后的CSS示例 #

* { 
  margin:0; 
  padding:0; 
  box-sizing: border-box; 
} 
html { 
  height:100%; 
  scroll-behavior: smooth; 
} 
body{ 
  background: #EEEEE3; 
  font-family: 'Montserrat', sans-serif; 
  min-height: 100%; 
} 
header { 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  position: fixed; 
  height: 23vh; 
  width:100%; 
  top:0; 
  left:0; 
  background-color: #EEEEE3; 
  z-index: 999; 
} 
.section_a{ 
  background: #B31B41; 
  min-height: 100vh; 
  padding-top: 23vh; 
} 
.section_b{ 
  background: #FF5983; 
  min-height: 100vh; 
  padding-top: 23vh; 
}
/* 修复锚点跳转遮挡 */
.section_a, .section_b {
  scroll-margin-top: 23vh;
}

另一种可选思路（无padding-top） #

如果你不想给区块加padding-top，也可以用margin-top+calc计算区块高度：

.section_a, .section_b {
  min-height: calc(100vh - 23vh); /* 视口高度减去header高度 */
  margin-top: 23vh; /* 让区块顶在header下方 */
  scroll-margin-top: 23vh;
}

这种方式下区块背景会从自身顶部开始，不会延伸到header区域，适合不需要内边距的场景。

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