设置URL片段时，强制元素位于浏览器视口的顶部

Question

我有一个包含多个标题元素的HTML页面，比如h1元素。元素具有id，因此如果设置了URL的片段部分，则滚动页面，使元素位于视口的顶部。

但是，当页面内容不足时，文本将不会位于顶部。

如何在页面底部添加空格，因此URL的片段部分所针对的id元素将位于视口的顶部？

我认为我需要获取JavaScript来获取URL的片段部分，如果已设置，则计算要添加到页面底部的空间，以便将目标元素放在顶部。但是，这似乎是一种狡猾的方法，因为对于每个浏览器窗口调整大小动作，必须重新计算空间。还有更好的方法吗？

示例：

<h1 id="first">first</h1>
<p>Some text.</p>

<h1 id="second">second</h1>
<p>Another text.</p>

Answer 1

您可以在最后一个元素上设置ID，并将其视频设置为100vh，如下所示：

.boxes {
  background: gray;
}

#first {
  background: #caaaaa;
}

#second {
  background: #caaaaa;
}

#full-height {
  background: #aaaaca;
  min-height: 100vh; 
}

<div class="boxes">
  <h1 id="first">first</h1>
  <p>Some text.</p>
</div>
<div class="boxes" id="full-height">
  <h1 id="second">second</h1>
  <p>Another text.</p>
</div>

运行代码段来查看。最后一个div具有视口的高度，因此链接时文本将始终位于顶部。

希望有所帮助