CODEWITHSUNDEEP
htmlcssoverflow
copenndthagen
copenndthagen

Reputation: 50732

overflow:hidden and % height

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?

Upvotes: 4

Views: 4938

Answers (1)

vdbuilder
vdbuilder

Reputation: 12964

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.

Upvotes: 1

Related Questions