Question

I am creating a page where I do not want any fixed px height and also use overflow:hidden.

My HTML is of the form;

<div class="scrollable fl">
...Some content
</div>

The CSS is defined as;

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

Also just to add, I have given overflow:hidden (with float:left as well for some parent) to all the parent/ancestor divs of scrollable ..

Now the issue is that the scrollable div is not expanding as per it’s content if I give height as 100% (It does for fixed px height…But I do not have that option since I am designing a completely fluid layout)

I tried 2 things from my side which did not work;
1. Keeping height chain alive (i.e. giving 100% height to all parent/ancestor divs of scrollable .
2. Trying with height:auto for scrollable

How do I fix this issue?

Answer 1

The div is set to 100% of the height required by it’s contents, not what you want.

try:

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    position: relative;
    top:0px;
    bottom:0px;
    width: 100%;
}

You may need to do this for other elements up the chain as well.