Re: [CSS21] Auto height of block with horizontal scrollbar

On Thu, 26 Aug 2010 19:26:24 +0200, Boris Zbarsky <bzbarsky@mit.edu> wrote:

> On 8/26/10 12:35 PM, Øyvind Stenhaug wrote:
>> Sections 10.6.6 and 10.6.7 indicate that the used height of an element
>> is independent of whether said element has a horizontal scrollbar.
>> However, the browsers I tried (Firefox, IE, Opera and Safari) seem to
>> interoperably implement something different, adding the height of the
>> scrollbar.
>
> Do they?  Or do they effectively increment the padding?

Well, if they increment the padding then they only do so for auto height,  
not when the height of the outer div is explicitly set to 100px.

> It's not clear from section 11.1.1. whether the scrollbar insertion  
> changes the used padding value or whether the scrollbar is supposed to  
> "overflow" the padding, and if so in which direction.  I would not  
> expect it to overflow out, since that would make it overlap other  
> content, so the options are either that the used padding is increased or  
> the used width/height is decreased, right?  Or I guess that the used  
> margin is increased...

Or the scrollbar is just painted on top of everything else, so that its  
end edge equals the end edge of the padding area ("overflowing" inwards).

> Note that I'm not sure you can actually measure "used width"  
> effectively, by the way.  How would you detect it?

I've been wondering the same thing. I'm not sure why the text talks about  
modifying the dimensions of "the containing block" (block? blocks? as you  
mention further down, there isn't just one) and not just the used  
width/height.  
(<http://lists.w3.org/Archives/Public/www-style/2008Jan/0259.html>)

> A related interesting testcase:
>
> <!doctype html>
> <title>auto height and scrollbar</title>
> <style>
> body > div {
> width: 100px;
> overflow: scroll;
> background: blue;
> position: relative;
> }
> div > div {
> height: 100px;
> }
> div > div.test2 {
>    position: absolute; top: 0px; left: 50%; background: green;
>    height: 50%; width: 50%;
> }
> div > div.test1 {
>    float: left; background: green; height: 50%; width: 50%;

Well, in this case the computed value of 'height' should be 'auto' per  
10.5. My Safari/Firefox versions aren't as recent but they both seem to  
honor that part (as does Opera).

(...)
> It's interesting to me that none of the browsers use the same percentage  
> basis for "left" as they do for "width"; that seems wrong.

Yeah, I guess there are some bugs in the more general behavior, I just  
focused on one case which seemed to be consistent.

> I'm not sure what the exact behavior the spec calls for here is; does  
> the containing block munging from section 11.1.1 only apply to the  
> content-edge containing block or also to the padding-edge containing  
> block?

I kind of assumed it was supposed to be both, but judging by the thread  
quoted above, recent edits might have considered only the former and  
forgotten about the latter...

-- 
Øyvind Stenhaug
Core Norway, Opera Software ASA

Received on Friday, 27 August 2010 13:01:27 UTC