html - 我怎样才能用一些 100vh 部分做一个固定的标题？

Question

我正在做一个培训网站，我想做一个包含 4 个部分的固定标题，每个部分都使用我的所有视口(viewport)，同时我想使用 anchor 来使用标题中的链接转到这些部分.

我尝试在正文上使用 100 填充顶部，但效果很好，但我的第一部分不在第一页上，我也尝试在我的部分上使用填充顶部，但它使背景更高并且不美观.

这是完整的代码 https://codepen.io/anon/pen/NZbdpB这是 CSS 代码:

*{
  margin:0;
  padding:0;
}
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;
  width: auto;
  height: 23vh;
  width:100%;
  top:0;
  left:0;
  background-color: #EEEEE3;
}

.section_a{
  background: #B31B41;
  height: 77vh;
  padding-top: 23vh;
  width: auto;
}
.section_b{
  background: #FF5983;
  height: 77vh;
  padding-top: 23vh;
  width: auto;
}

异常(exception)的结果是标题将被固定，该部分将在标题之后立即开始，并且 anchor 将带我到该部分而不会被剪切或在部分中没有使背景“溢出”的巨大填充

现在的结果是背景“溢出”，正如您在 CodePen 中看到的那样。

Answer 1

一个可能的解决方案是在每个部分(顶部)内添加一个 anchor 元素以抵消固定标题的高度:

<a class="anchor" id="second"></a>

将以下样式添加到 anchor 元素:

.anchor {
   display: block;
   position: relative;
   top: -46vh; /* height of the fixed header and the padding */ 
   visibility: hidden;
}

现在，不再链接到部分 ID，而是链接到 anchor ID。