Question

我遇到叠加问题。

我的代码在这里：jsfiddle

主要问题在于我认为的line 59。

max-height:auto;

如果是这样，内容只会流过叠加层。如果我将height设置为特定的<{p>}

max-heigt:250px;

一切都很好，叠加层会保持一个大小并显示滚动条。即使设置为100％也无济于事。

如何设置相对于其父div的大小？对于width，它可以正常工作，但不适用于height。我尝试了几个类和答案，我在这里找到，但要么我必须修改大小或内容流过覆盖。我想使用相对大小，因此它适用于大多数桌面分辨率，并且不能修复大小。任何可行的解决方案？

Answer 1

可能不完全是您想要的，但如果您在两个元素上指定特定的height，它似乎工作正常。我建议您只需将max-height重命名为height：

<强> CSS

.overlay {
    ...
    height: 80%;
    ...
}

#OverlayContent {
    ...
    height: calc(100% - 20px); /* subtract padding or use box-sizing */
    ...
}

请参阅jsFiddle

Answer 2

将overflow-y: scroll;添加到.overlay类会为您提供滚动条并将文本剪辑到容器外

与父母大小相关的叠加的div大小

2 个答案: