View Full Version : Scrollable DIV's while defning height in percentages

05-17-2010, 08:49 PM

I have a div which looks pretty much like this in my CSS:

.myDIVClass {
height: 50%;
overflow-y: scroll;

The div displays records from a database.

The problem is that when I have too many records to present, IE lets the div "invade" into regions below its border. As you can see, I've used the "overflow-y" property to make IE create a scrollbar, but to no avail.

Also, when I define "height" in absolute pixels (as opposed to percentages, as in the example), then it works perfectly fine. But as soon as I use percentages, it fails on me and completely ignores the scrolling command.

05-17-2010, 09:03 PM
Have you given the html and body a height and a width. If you haven't the other commands will not know what their percentages are of.

body, html{height:100%;

Your complete code or better still a link would be useful.


05-17-2010, 09:57 PM
Thanks for your solution, however it isn't related to my question.

Yes, I have indeed given my body and html height and width. Yes, percentages work perfectly fine for me anywhere else. The only problem I have is when I have to have one of my DIV's use a scrollbar.

Try it yourself: Pick a DIV which uses a y-axis scrollbar in case of overflow, then define its height using percentages instead of pixels.

Unfortunately, I can't include the entire file - It is in a different network (away from the internet) and I'm not allowed to mix the two.

Any ideas?