子 div 中的滚动条不适用

Question

我正在联系你...

我有一个叠加层（包含两个 div），它应该根据需要占据尽可能多的高度，但不能大于屏幕。如果内容太大，我会需要一个滚动条，但我只想要 滚动条 秒 div.

HTML

<div class="parent">
  <div class="child1"></div>
  <div class="child2">This div contains a long text, longer than there is space.</div>
</div>

CSS

.parent {
  position: absolute;
  width: 250px;
  max-height: calc(100% - 50px);
  /* overflow-y: auto;*/ -> This would work, but this is not what I want 
}

.child1 {
  width: 100%; -> this is an image that can have different heights
}

.child2 {
  width: 100%;
  overflow-y: auto;
}

JS Fiddle

经过我所有的尝试，我只设法为整个父项 div 获得滚动条，但我只想要第二个 div。我猜第二个 div 不理解其父级的高度，因此忽略它。有谁知道如何解决这个问题吗？

Answer 1

像这样？是的，您的 parent 需要具有 child 可以理解的高度，以便使用百分比高度。下面这两个示例中的关键是在 CSS 中的 parent 上定义 height，因为默认情况下它被设置为 auto，但这是行不通的让 child 元素弄清楚他们应该做什么。

此外，由于您的第一个 div 是 50px 的固定高度，因此很容易将较低的可滚动 div 设置为 calc 值以获得它占据 parent 的 100%，减去上面 div 的高度。

最后，我还在示例的 CSS 中包含了一个注释掉的 flexbox 实现，所以也请看一下，如果您对此有任何疑问，请告诉我！

* {
  box-sizing: border-box;
}

.parent {
  background-color: blue;
  position: absolute;
  border: 2px solid black;
  padding: 5px;
  width: 250px;
  height: 100%;
  max-height: 100vh;
}

.child1 {
  background-color: red;
  height: 50px;
}

.child2 {
  padding: 6px;
  background-color: yellow;
  height: calc(100% - 50px);
  overflow-y: scroll;
}

/*
Here is an implementation using flexbox, as well,
if your browser support allows it
.parent {
  background-color: blue;
  position: absolute;
  border: 2px solid black;
  padding: 5px;
  width: 250px;
  height: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column
}

.child1 {
  background-color: red;
  height: 50px;
  flex-shrink: 0;
}

.child2 {
  padding: 6px;
  background-color: yellow;
  overflow-y: scroll;
  flex-grow: 1;
  flex-shrink: 1;
}
*/

<div class="parent">
  <div class="child1"></div>
  <div class="child2">
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
   This div contains a long text, longer than there is space.
  </div>
</div>

Answer 2

您需要为 .parent 添加高度，即使它只是

height: 100%;

单独设置max-height不足以让二子滚动

子 div 中的滚动条不适用

Scrollbar in child div does not apply

css

overlay

scrollbar

absolute