如何应用溢出：隐藏到内容框？

Question

我编写了以下代码。滚动此代码将在粘性标题上方的空白处显示文本。我想抑制这个。

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
}

.content {
  background-color: #c9c;
}

.content>h1 {
  background-color: #fa0;
  color: white;
  margin: 0;
  position: sticky;
  top: 0;
}

<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>

在这里，我有以下两个限制。

• 在空白处不要重叠与背景颜色相同的（伪）元素
• 请勿使用JavaScript

---

鉴于以上两个限制，我认为如果将代码的.content类与内容框分隔开，它将按预期工作。

但是，当我使用clip-path执行以下代码时，它并没有达到我想要的方式。

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
}

.content {
  background-color: #c9c;
  clip-path: content-box; /* ADD */
  height: 100%; /* ADD */
}

.content>h1 {
  background-color: #fa0;
  color: white;
  margin: 0;
  position: sticky;
  top: 0;
}

<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>

---

此外，如果您使用margin属性，乍一看它将看起来像预期的那样。但是，这是不正确的，因为滚动条的位置正在更改。

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 20px 20px;  /* CHANGE */
  margin-top: 20px;  /* ADD */
  /* Although it looks as expected, it is not correct because the height of the scroll bar changes with margin. */
}

.content {
  background-color: #c9c;
}

.content>h1 {
  background-color: #fa0;
  color: white;
  margin: 0;
  position: sticky;
  top: 0;
}

<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>

问题是滚动条位于填充框中，而没有扩展到边距框。

使用margin属性时滚动条位置改变的原因是box-model的结构。因此，即使您使用border属性，它的行为也与margin属性相同。

如何在此限制内实现这一目标？

---

修改

我做了我想做的事。

但是，这也需要将填充宽度应用于渐变。太复杂了。

此外，这与上面列出的限制之一冲突。

还有另一种方法吗？

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 20px 20px;
  position: relative;
}

.content {
  background-color: #c9c;
}

.content > h1 {
  color: white;
  margin: 0;
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, #fff, #fff 20px, #fa0 20px, #fa0);
  padding-top: 20px;
}

<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>

Answer 1

对于标题，将top属性设置为可滚动区域顶部填充量的负值，并为其设置一个顶部边框。然后给中介父母该金额的负最高保证金。

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  margin: 0;
}

header {
  background-color: #f8f;
  flex: none;
  height: 3em;
}

.container {
  display: flex;
  flex: 1 1 auto;
  height: 0;
}

aside {
  background-color: #ddb;
  flex: none;
  width: 200px;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
}

.content {
  background-color: #c9c;
}

.content>h1 {
  background-color: #fa0;
  color: white;
  margin: 0;
  border-top: 20px solid #fff;
  position: sticky;
  top: -20px;
}

.main>.content:first-child {
  margin-top: -20px;
}

<header>header</header>
<section class="container">
  <aside>sidebar</aside>
  <main class="main">
    <section class="content">
      <h1>heading1</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>...</div>
      <h1>heading2</h1>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      <div>text</div>
      ...
    </section>
  </main>
</section>