Question

我希望容器div扩展到div的内部内容（无序列表）的高度。我无法让它发挥作用。有什么想法吗？

HTML：

<div class="container">
    <ul id="list">
        <li>stuff</li>
        ...
    </ul>
</div>

CSS :(不起作用）

.container {
    width: 332px;
    height: 100%;
    padding: 0.4em; 
    position: relative; 
    overflow-y:scroll; 
    overflow-x:hidden;
}

#list {
    position: absolute;
    height:auto;
    width:317px;
}

Answer 1

overflow-y:scroll与您要求扩展的要求相冲突，height:100%也是如此，因为100％基于.container包含的元素高度。

您需要做的是删除height:100%和overflow-y:scroll，替换为overflow-y:hidden，我相信它应该有效。

PS。为什么#list需要position:absolute？

Answer 2

从height: 100%;移除position: relative;和.container，然后从position: absolute;移除#list。

Answer 3

两种选择：为#list

添加高度：100％

#list{
position: absolute;
height:auto;
width:317px;
height: 100%;
}

或将容器设为ID：

#container{
... 
}

Answer 4

为.container

设置min-width和/或max-width属性

如何让容器div扩展到其内容的高度？

4 个答案: