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%;">    
            <div style="height:100%; overflow:auto">       

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?

Comments (5)
  1. Aaron says:

    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.

  2. 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/

  3. Eve says:

    I can’t answer the question but I couldn’t figure out why my scoll bar was not appearing… So thanks for the answer!!

  4. Beaver says:

    > 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.

  5. Ram says:

    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?

Comments are closed.

Skip to main content