html - child 从 parent 那里得到 100% 的高度

Question

我有 2 个 div 和一个包含内容的 ul，ul 的高度并不总是相同，有时会有 100% 或更多的父元素，而其他元素则更少，当高度更大时我该如何做填充底部超过 100%？

HTML:

<div id="parent">
    <div id="child">
        <ul>
            <li>Test</li>
        </ul>
    </div>
</div>

CSS:

#parent {
    max-height: calc(100% - 50px);
    background-color: red;
    margin: 20px 0;
    border: 1px solid black;
    overflow: hidden;
}
#child {
    padding-bottom: 10px;
}

这是 jsfiddle 中的示例

我也在尝试在 ul 中使用 jScrollPane 但是

谢谢!

Answer 1

尝试将 overflow: hidden 也设置为 body。

body {overflow: hidden}