Geek Answers Handbook

Overflow: Hidden and% Altitude

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

My HTML looks like:

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

CSS is defined as:

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

Also, to add, I gave an overflow: hidden (with float: left, as well as for some parent) to all the parent / ancestors of the scrollable divs.

Now the problem is that the scrollable div does not expand in content if I give the height as 100% (it does for a fixed height px ... But I don't have this option since I'm developing a fully fluid layout)

I tried 2 things on my part that didn't work; 1. Keeping the growth chain alive (that is, giving 100% height to all parents / ancestors of the scrollable divs. 2. Trying with the height: auto for scrollable

How to fix this problem?

+4
source share
1 answer

The div value is set to 100% of the height required for this content, not what you want.

to 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 in the chain.

+1
source

More articles:


All Articles