如何为 HTML 中的章节参考 link 指定边距？

Question

我有一个 body 和一个 header (100px)，以及一个带有 magin (100px) 的容器。像这样：

.myHeader {
  height: 100px;
}

.myContainer {
  margin-top: 100px;
}

我正在写一些带章节的文本，我用一个按钮引用一些章节。

<a href={`#${chapter.step}`}>
    <Button key={chapter.id} >
       {chapter.name}
    </Button>
</a>

在文字方面，我显然有 <div id="chapterId">...text</div>。

这很好用，除了 link 将我带到页面顶部，在 header 后面。

如何指定参考从特定高度开始？

谢谢

Answer 1

根据我从你的 post 那里收集到的信息，我不确定我是否正确，因为你提供的信息有些模糊，你试图让容器距离 window，这样 header 仍然可见。引用 window 边界通常需要 position: fixed;。这是一个看起来像我认为您的描述所指的示例：

body {
  margin: 0;
}

.myHeader {
  height: 100px;
  margin: 0;
  background: blue;
  text-align: center;
  font: 50px/100px serif;
}

.myContainer {
  position: fixed;
  top: 100px;
  bottom: 0;
  overflow: auto;
}

<h2 class="myHeader">
  Header
</h2>
<section class="myContainer">
  <a href="#Chapter_2">Jump to Chapter 2</a>
  <h3 id="Chapter_1">Chapter 1</h3>
  Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. Text of chapter 1. 
  
  <h3 id="Chapter_2">Chapter 2</h3>
  Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. Text of chapter 2. 
</section>

如何为 HTML 中的章节参考 link 指定边距？

How can I specify a margin to a chapter reference link in HTML?

html

css

header

margin

href