CODEWITHSUNDEEP
csshtmlheight
John Anderson
John Anderson

Reputation: 1075

How can I get a container div to expand to height of its contents?

I want the container div to expand to the height of the div's inner contents (the unordered list). I can't get it to work. Any ideas?

HTML:

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

CSS: (doesn't work)

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

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

Upvotes: 1

Views: 4996

Answers (4)

Charles
Charles

Reputation: 648

Set a min-width and/or max-width attribute for .container

Upvotes: 0

Dan O
Dan O

Reputation: 6090

remove height: 100%; and position: relative; from .container and remove position: absolute; from #list .

Upvotes: 3

IgnasK
IgnasK

Reputation: 384

Two options: Either add height:100% for #list

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

Or make container as ID:

#container{
... 
}

Upvotes: 0

Mr. TA
Mr. TA

Reputation: 5359

The overflow-y:scroll conflicts with your requirement that you want it to expand, as does the height:100% since 100% is based on the .container's containing element height.

What you need to do is remove height:100% and overflow-y:scroll, replace with overflow-y:hidden and I believe it should work.

PS. Why do you need to the #list to be position:absolute?

Upvotes: 4

Related Questions