html - 与父尺寸相关的叠加层的 div 尺寸

Question

我对叠加层有疑问。

我的代码在这里:jsfiddle

我认为主要问题出在 CSS 的 line 59 中。

max-height:auto;

如果是这样，内容就会流过叠加层。如果我将 height 设置为特定的值，例如

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