Question

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

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

Foo

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>之类的东西，而不是在视口滚动条上），并将滚动条仅添加到粉红色部分，而没有滚动条视口。

只有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>

Answer 2

问题归结为：代码中的flex: 1。

flex: 1是一条速记规则，可转换为：

flex-grow: 1
flex-shrink: 1
flex-basis: 0

因为您使用的是列方向容器，所以flex-basis代表height。因此，您已将弹性项目设置为height: 0。

但是overflow属性仅在容器具有设置的高度时才起作用。

来自MDN：

为了使overflow生效，块级容器必须具有设置的高度（height或max-height）或 white-space设置为nowrap。

好吧，对于某些浏览器，flex-basis: 0可能不足以满足这些条件，因此不会发生溢出。

为确保布局在所有浏览器中都能可靠运行，请在溢出元素上设置一个高度（任何高度）。将此添加到您的代码中：

.subcontentContainer {
   flex: 1 1 1px;
 }

.siteContainer {
  background: gold;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.contentContainer {
  background: lightblue;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.subcontentContainer {
  background: pink;
  flex: 1 1 1px; /* ADJUSTMENT */
  overflow-y: auto;
}

body,
div,
h1,
h2,
html,
p {
  margin: 0;
  padding: 0;
}

<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>

将垂直滚动条应用于内容框，而不是主体/视口

2 个答案: