html - 将垂直滚动条应用于内容框，而不是正文/视口(viewport)

Question

我有一个包含动态内容的网站，我希望其中一个部分填充屏幕的剩余高度，但需要注意的是，如果该部分中的内容会导致页面高度超过视口(viewport)高度，我想要将部分的高度停止在屏幕的底部边缘，并为该部分添加垂直滚动条。

我正在使用 CSS Flexbox。这是标记和 CSS 的非常简化的版本:

body, div, h1, h2, html, p {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

.siteContainer {
  background: gold;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.contentContainer {
  background: lightblue;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.subcontentContainer {
  background: pink;
  flex: 1;
  overflow-y: scroll;
}

<div class="siteContainer">
  <h1>Header</h1>
  <div class="contentContainer">
    <h2>Subheader</h2>
    <div class="subcontentContainer">
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
    </div>
  </div>
</div>

假设您的屏幕有一定的高度，您应该会看到粉红色部分占据了屏幕的大部分，并且文本不应垂直离开屏幕。

但是，如果您要复制并粘贴 <p>Some text here.</p>多分开几次，使文本离开屏幕，然后您将看到视口(viewport)滚动条已启用。

不过，我想将内容停止在屏幕底部边缘(大概是 overflow-y 或类似的东西)，而不是视口(viewport)滚动条，并将滚动条添加到粉红色部分，并且没有滚动条视口(viewport)。

仅使用 CSS 就可以做到这一点吗？如果可以，如何实现？谢谢。

Answer 1

如果将 overflow-y:hidden 设置为 body，则外部滚动条将消失。

将 body 和 siteContainer 的高度设置为 100vh。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow-y: hidden;  
}

body,
div,
h1,
h2,
html,
p {
  margin: 0;
  padding: 0;
}

.siteContainer {
  background: gold;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100vh;
}

.contentContainer {
  background: lightblue;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.subcontentContainer {
  background: pink;
  flex: 1;
  overflow-y: auto;
}

<div class="siteContainer">
  <h1>Header</h1>
  <div class="contentContainer">
    <h2>Subheader</h2>
    <div class="subcontentContainer">
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
      <p>Some text here.</p>
    </div>
  </div>
</div>