绝对定位的父元素中滚动的div

Question

我是一名有用的助手，可以为您翻译文本。

我有一个绝对定位的 div，在里面我有另一个内容比父元素大的 div。我需要子 div 有一个垂直滚动条，但我的尝试并没有起作用。我需要在不使用 js 的情况下完成这个操作。这是我的代码：

HTML：

<div class="container">
    <div class="allow-scroll">
         ---CONTENT---
    </div>
</div>

CSS：

.container{
    background: red;
    position: absolute;
    top:0;
    left:0;
    right: 50%;
    bottom: 50%;
    overflow: hidden;
}
.allow-scroll{
    overflow-y: scroll;
    position: relative;
    height: 100%:
}

还有一个小提琴：https://jsfiddle.net/zasnj08z/

- Elaine Marley

Answer 1

这是因为您在父元素上设置了overflow: hidden。

只需将其更改为：

overflow: scroll

在您的fiddle中查看此处 - https://jsfiddle.net/zasnj08z/3/ 另外，您不需要在子元素上使用overflow scroll，因为您想要滚动的是父容器。在fiddle中也更改了这一点。

- ajmajmajma

---

这是一个有效的解决方案，但对我来说另一个更好，因为我需要父元素具有溢出隐藏（与此问题无关）。 - Elaine Marley

Answer 2

你的 CSS 中只有一个小错误。

最后一行 height: 100%: 末尾多了一个冒号。移除这个冒号就可以正常工作了。

- Felix A J