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)滚动条已启用。

虽然我不想使用视口(viewport)滚动条，但我想将内容停止在屏幕的底部边缘(大概是 overflow-y 或类似的东西)并仅向粉红色部分添加滚动条，而没有滚动条用于视口(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>