时间戳

首页 > 解决方案 > 子 div 中的滚动条不适用

css - 子 div 中的滚动条不适用

问题描述

我正在向你伸出援手...

我有一个叠加层（包含两个 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小提琴

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

标签： cssscrollbaroverlayabsolute

解决方案

像这样？是的，您的父母需要有一个孩子可以理解的高度，才能使用百分比高度。下面这两个示例中的关键是height在父元素上定义 a，在 CSS 中，因为默认情况下它设置为auto，这不会让子元素弄清楚它们应该做什么。

此外，由于您的第一个 div 的高度固定为50px，因此很容易将较低的、可滚动的 div 设置为一个calc值，使其占据父级的 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>

推荐阅读