Question

我正在做一个培训网站，我想用4个部分做一个固定的标题，每个部分都使用我的所有视口，与此同时，我想使用锚点使用标题中的链接转到这些部分

我尝试在主体上使用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;
}

例外结果是标题将被修复，该部分将在标题之后立即开始，并且锚点将带我到该部分，而不会被剪切或在该部分中没有使背景“溢出”的巨大填充

现在的结果是，在CodePen中可以看到背景“溢出”。

Answer 1

可能的解决方案是在每个部分的内部（顶部）添加一个锚点元素，以抵消固定标头的高度：

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

在锚元素中添加以下样式：

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

现在，不要链接到部分ID，而是链接到锚点ID。

如何用一些100vh部分进行固定的接头连接？

1 个答案: