Welcome to MSDN Blogs Sign in | Join | Help

Why overflow:auto requires element to have fixed width or height?

While editing my Web site the other day I encountered an interesting problem.

For some reason W3C decided that overlow property for some reason should only provide scroll if element has fixed size and/or absolutely positioned (I guess that's what is the 'explicit size'). I.e. <div style="height:100px; overflow:auto"> works while <div style="height:100%; overflow:auto"> does not and instead div is rendersed fully strethed around its content and if content is tall enough, the div will extend well below the window bottom. What is really odd is that in case of

<table style="height:100%;">    
    <tr>       
        <td>          
            <div style="height:100%; overflow:auto">       
        </td>    
    </tr>
</table>

div extends below the table bottom as well. Apparently it is what standard implies since Opera, Mozilla and IE6 in strict mode all render the page identically. In non-strict mode IE6 renders div confined inside the table cell and display vertical scroll bar in the div. That is what I expected, but apparently I expected wrong thing ;-).

In my photo album pages I had to resort to some javascript code that sets div dimensions in pixes explicitly each time you resize the window. Is there a particular reason why overflow should not work with relative element sizes?

Published Sunday, August 22, 2004 10:10 PM by Mikhail Arkhipov (MSFT)

Comments

# re: Why overflow:auto requires element to have fixed width or height?

This problem is as old as time, but it's usually referred to as the "vertical centering" problem (since it's basically the same issue -- positioning or sizing something based on the height of the viewport).

Google <CSS vertical center> and you'll probably find hundreds of references to it, as well as various hacks.

I think it was designed this way because at the time CSS was created, the w3c were not fully aware of people's desire to emulate traditional forms-based UIs with HTML and they were still thinking in a traditional page-oriented top-down flow-based model.

Basically, they were just out of touch.
Monday, August 23, 2004 9:42 AM by Aaron

# re: Why overflow:auto requires element to have fixed width or height?

you can find more information than you ever wanted on this, and other CSS issues (like the infamouse Box Model problem) at http://www.positioniseverything.net/

Tuesday, August 24, 2004 11:58 AM by Derick Bailey

# re: Why overflow:auto requires element to have fixed width or height?

I can't answer the question but I couldn't figure out why my scoll bar was not appearing... So thanks for the answer!!
Tuesday, July 26, 2005 4:28 PM by Eve

# re: Why overflow:auto requires element to have fixed width or height?

> some javascript code that sets div dimensions in pixes explicitly each time you resize the window

Does that javascript code work on most ver 4 browsers? Where can I find such a code? Thank you.
Sunday, July 31, 2005 9:08 PM by Beaver

# re: Why overflow:auto requires element to have fixed width or height?

Why can't Microsoft Fix the Overflow:Auto property for Tables. It works in all browsers except IE. Why do I need to wrap the table inside a DIV just to get a vertical/horizontal scroll?

Wednesday, November 07, 2007 8:58 PM by Ram
New Comments to this post are disabled
 
Page view tracker