如何在html css中将滚动条添加到父div？

Question

我想为父 div 添加一个垂直滚动条，因为在下面的设置中，孩子的高度远大于父 div 的高度。我在 W3 学校读到默认情况下 overflow: auto; 因此如果子 div 的高度超过父 div 的高度，它将添加滚动条。但是下面的设置并不能证明它是合理的。帮助我理解这一点。

根据 W3 school CSS doc，

如果高度设置为数值（如像素、(r)em、百分比），那么如果内容不适合指定的高度，则会溢出。容器如何处理溢出的内容由 overflow 属性定义。

我们如何证明上述说法是正确的？

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
}

<div class="parentDiv">
  <div class="childDiv">

  </div>
</div>

@Edited：默认overflow: visible;，它不是自动的。我读错了。

Answer 1

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
  overflow-y: auto; /* new stuff */
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
}

<div class="parentDiv">
  <div class="childDiv">

  </div>
</div>

Answer 2

确实有道理。 您提供的 CSS 代码呈现这样的页面

这里父母和孩子的宽度相同，所以你无法观察到溢出 稍微改变孩子的宽度，让父母像这样可见

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 100px;
}

现在输出将是

正如我们所见，“粉红色元素”是具有比父级溢出更大的 height 属性值的子级。

默认溢出值为visible。所以我们可以看到元素溢出父元素。

因为孩子溢出了父母。 我们必须在父级上定义一个overflow 属性。

正如你从 w3 链接的文档所说，如果溢出属性设置为auto，如果内容溢出，它将添加一个滚动条

Here 是一个演示相同的代码笔。

为了更好地理解，我更改了孩子的width 和margin。

请告诉我，如果这证明了声明的合理性

Answer 3

使用最大高度而不是宽度，因此如果子高度小于父高度，它将在没有滚动的情况下进行评估，否则它将获得最大高度并添加溢出滚动

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  max-height: 100px;
  width: 200px;
   overflow-y:scroll;
}

  
<div class="parentDiv">
  <div class="childDiv">
    <br>abc<br>def<br>ghi<br>jkl<br>mno
  </div>
</div>
<br><br><br>
   

<div class="parentDiv">
  <div class="childDiv">
    1 line
  </div>
</div>

Answer 4

你能检查一下下面的代码吗？希望它对你有用。

我们在 .parentDiv 中设置了 max-height 和 overflow-y: auto; overflow-x: hidden; 所以当 .childDiv 高度大于 .parentDiv 时会滚动，否则滚动条会滚动自动隐藏。

这里我们设置了max-height，因为当.childDiv高度小于.parentDiv高度时，.parentDiv高度会被设置根据 .childDiv 块高度。

.parentDiv {
  background-color: coral;
  max-height: 50px;
  width: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
}

<div class="parentDiv">
  <div class="childDiv">
  </div>
</div>

请参考此链接：https://jsfiddle.net/yudizsolutions/ev4qou6c/2/

Answer 5

所有当前（截至 2021 年 1 月 28 日）答案都使用固定高度的子元素。虽然这可能是你想要的，但我需要孩子（因此也是父母）消耗页面上所有可用的高度，但仍然能够滚动孩子。

如果这是其他人想要的，那么您可以使用 flex + column 来实现这样的效果 - 显然，您需要降低浏览器的高度以使正文需要滚动（您可以切换 '如果您希望滚动控件始终呈现，则overflow-y：auto'到'overflow-y：scroll'）：

html, body {
  height: 100%;
  margin: 0;
}

.header {
  background: green;
}

.scrollable-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scrollable-body {
  background: blue;
  padding: 10px;
  overflow-y: auto;  
}

<div class="scrollable-container">
  <div class="header">
    <h1>Header section</h1>
    <blockquote>What is it: Fixed header, scrollable body</blockquote>
  </div>
  <div class="scrollable-body">
    <ul>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>      
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>      
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
  </div>
</div>