Re: scroll bar size in width calculations

Alex Mogilevsky wrote:
> We are trying to understand the standard rules for sizing with 
> overflow:scroll.
> 
> Per the CSS 2.1 spec, section 11.1.1, there is a reference to exactly 
> where the scrollbar goes as well as a reference to how the scrollbar 
> impacts the box model calculations:
> 
> In the case of a scrollbar being placed on an edge of the element's box, 
> it should be inserted between the inner border edge and the outer 
> padding edge. The space taken up by the scrollbars affects the 
> computation of the dimensions in the rendering model.
> 
> The visual model formatting details has details such as the following in 
> 10.3.3 for Block-level, non-replaced elements in normal flow:
> 
> 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 
> 'padding-right' + 'border-right-width' + 'margin-right' + scrollbar 
> width (if any) = width of containing block
> 
> None of the above rules appear to suggest that specified ‘width’ is 
> changed when scrollbar is present and the settings are otherwise not 
> overspecified.
> 
> However the attached example is rendered identical in all browsers we 
> try. Is there something in the spec that requires subtracting scrollbar 
> width from ‘width’, or is there language elsewhere which gives UA 
> freedom to do so?

Here's the record of the issue that resulted in the current spec text:

   Issue 150.
   URI: http://www.w3.org/mid/43C68B95.4070405@mit.edu
   Description:

   I'm trying to understand the following paragraph in section 11.1.1 [1]:

     In the case of a scrollbar being placed on an edge of the element's box, it
     should be inserted between the inner border edge and the outer padding edge.
     Any space taken up by the scrollbars should be subtracted from the computed
     width/height, thus preserving the inner border edge.

   What does that mean in practice?  Specifically, consider the following markup:

     <div id="outer">
       <div id="inner">Text</div>
     </div>

   And the styles

     #outer { overflow: auto; height: 200px; width: 200px;}
     #inner { height: 100%; width: 200%; }

   Now the "outer" div overflows horizontally, so a horizontal scrollbar
   has to be inserted.  Given that, what is the computed value of
   "height" for the outer div?  Is it 100px?  Or is it (100px - 'height
   of scrollbar')?  And more specifically, what is the computed value of
   "height" for the inner div?

   Testcase: http://annevankesteren.nl/test/css/temp/002.htm

   Resolution:

   The computed value of the outer 'height' is 200px.
   The computed value of the inner 'height' is 100%.

   Proposal:

   10.3.3: Change

     'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
     'padding-right' + 'border-right-width' + 'margin-right' = width of
     containing block

     If 'width' is not 'auto' and 'border-left-width' + 'padding-left' +
     'width' + 'padding-right' + 'border-right-width'

   ...to:

     'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
     'padding-right' + 'border-right-width' + 'margin-right' + scrollbar
     width (if any) = width of containing block

     If 'width' is not 'auto' and 'border-left-width' + 'padding-left' +
     'width' + 'padding-right' + 'border-right-width' + scrollbar width
     (if any)

   Add to the end of that section:

     The "scrollbar width" value is only relevant if the user agent uses
     a scrollbar as its scrolling mechanism. See the definition of the
     'overflow' property.

   10.3.7: Change:

     'left' + 'margin-left' + 'border-left-width' + 'padding-left' +
     'width' + 'padding-right' + 'border-right-width' + 'margin-right' +
     'right' = width of containing block

   ...to:

     'left' + 'margin-left' + 'border-left-width' + 'padding-left' +
     'width' + 'padding-right' + 'border-right-width' + 'margin-right' +
     'right' + scrollbar width (if any) = width of containing block

   Add to the end of that section:

     The "scrollbar width" value is only relevant if the user agent uses
     a scrollbar as its scrolling mechanism. See the definition of the
     'overflow' property.

   10.6.4: Change:

     'top' + 'margin-top' + 'border-top-width' + 'padding-top' +
     'height' + 'padding-bottom' + 'border-bottom-width' +
     'margin-bottom' + 'bottom' = height of containing block

   ...to:

     'top' + 'margin-top' + 'border-top-width' + 'padding-top' +
     'height' + 'padding-bottom' + 'border-bottom-width' +
     'margin-bottom' + 'bottom' + scrollbar height (if any) = height of
     containing block

   Add to the end of that section:

     The "scrollbar height" value is only relevant if the user agent
     uses a scrollbar as its scrolling mechanism. See the definition of
     the 'overflow' property.

   Change 11.1.1:

     In the case of a scrollbar being placed on an edge of the element's
     box, it should be inserted between the inner border edge and the
     outer padding edge. Any space taken up by the scrollbars should be
     subtracted from the computed width/height, thus preserving the
     inner border edge.

   ...to:

     In the case of a scrollbar being placed on an edge of the element's
     box, it should be inserted between the inner border edge and the
     outer padding edge. The space taken up by the scrollbars affects
     the computation of the dimensions in the rendering model.

   Issue closed.

~fantasai

Received on Thursday, 3 January 2008 03:11:38 UTC