Question

我有两个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}

Answer 2

有些css破解得到这个。添加了10px的border-bottom和相同的容器颜色，以及一个用于黑色border-bottom的box-shadow。

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

以下是jsfiddle

希望这有帮助！

儿童从父母那里得到100％的身高

2 个答案: