内部div中的滚动条，而父级只有最大高度答案

【问题标题】：scrollbar in inner div while parent only has max-height内部div中的滚动条，而父级只有最大高度
【发布时间】：2020-04-28 00:04:30
【问题描述】：

我无法让一个简单的 css 构造工作，这让我很沮丧。

我有一个绝对 div 位于我的页面中的某个位置，并且位置固定。它有一个最大高度，它是容器高度减去我希望它从底部具有的一些边距的计算，如下所示：

#container {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  max-height: 300px;
}

这很好用。

然后它有两个子 div。第一个改变高度但不应该滚动。第二个也改变高度（内容改变），只有当容器 div 不能进一步增长时才应该滚动。

#inner {
  overflow: auto;
  /* and prolly some other stuff... */
}

我做了一个有描述问题的小提琴.. https://jsfiddle.net/qy3dvh7n/

有人看到我想念的吗？

【问题讨论】：

标签： html css height overflow

【解决方案1】：

我认为您必须将 max-height 属性添加到您的 #inner div。然后滚动出现，因为它具有 div 的最大高度。

https://jsfiddle.net/5zfomxne/4/

【讨论】：

查看我对上一篇文章的评论。这不是我想要的行为。

【解决方案2】：

您可以将#inner 更改为max-height，并将height 设置为280px，这样您在顶部和底部都有10px padding

#inner {
  background-color: red;
  overflow: auto;
  max-height: 280px;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#container {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 300px;
  background-color: blue;
  padding: 10px;
}

#container2 {
  position: absolute;
  top: 350px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 300px;
  background-color: blue;
  padding: 10px;
}

#header {
  /* this header has a flexible height */
  background-color: green;
}

#inner {
  background-color: red;
  overflow: auto;
  max-height: 280px;
  height: 100%;
}

<div id="container">
    <div id=header>here some text to give it height</div>
    <div id="inner">
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; here there should be a scrollbar   ---> <br />
      here lots of text<br />
      here lots of text<br />
      that overflows the this div<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
    </div>
</div>






<div id="container2">
    <div id=header>here some text to give it height</div>
    <div id="inner">
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
    </div>
</div>

【讨论】：

这个解决方案的问题是蓝色容器的大小是固定的。（在我的例子中，我很抱歉）我想要的结果是它根据内部（红色）的内容从 0 缩放到最大高度（最大高度应该这样做）分区。当蓝色容器的大小达到其最大高度时，内部的红色 div 会溢出。