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

时间:2012-06-07 17:34:58

标签: css html height

我希望容器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;
}

4 个答案:

答案 0 :(得分:4)

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

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

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

答案 1 :(得分:3)

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

答案 2 :(得分:0)

两种选择: 为#list

添加高度:100%
#list{
position: absolute;
height:auto;
width:317px;
height: 100%;
}

或将容器设为ID:

#container{
... 
}

答案 3 :(得分:0)

为.container

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