Partager via

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

  • Article

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?

Comments

  • Anonymous
    August 23, 2004
    The comment has been removed
  • Anonymous
    August 24, 2004
    The comment has been removed
  • Anonymous
    July 26, 2005
    I can't answer the question but I couldn't figure out why my scoll bar was not appearing... So thanks for the answer!!
  • Anonymous
    July 31, 2005
    > 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.
  • Anonymous
    November 07, 2007
    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?