W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: [cssom-view] scrollWidth vs clientWidth

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 17 Aug 2010 13:03:14 -0700
Message-ID: <AANLkTimjmS0U8rOrPktE1GYa+NvBHs8VQUsreZ4EXBLj@mail.gmail.com>
To: Anne van Kesteren <annevk@opera.com>
Cc: www-style@w3.org, David Flanagan <david@davidflanagan.com>
On Mon, Aug 16, 2010 at 10:56 PM, Anne van Kesteren <annevk@opera.com> wrote:
> On Tue, 17 Aug 2010 01:03:33 +0200, David Flanagan <david@davidflanagan.com>
> wrote:
>> Perhaps you could add a non-normative green note to the spec to clarify
>> the distinction between these two properties.
>
> I think it would be better actually if one day someone contributes a graphic
> to visualize the whole thing. If that day never comes I might take a stab at
> it myself.

Something like this?

<!DOCTYPE html>
<div id=border style="position: relative; width: 500px; height: 400px;
border: 3px solid black; font-weight: bold; font-family: sans-serif;">
	<div id=padding style="width: 400px; height: 300px; border: 3px
dashed gray;margin: 47px;">
		<div id=content style="position: relative; width:300px;
height:200px; border: 3px dotted silver; margin: 47px;">
			<pre style="position: relative; z-index: 50;">foo foo foo foo foo
foo foo foo foo foo foo foo</pre>
		</div>
	</div>
	<div>
	</div>
	<div id=scrollbar style="position: absolute; top: 50px; right: 50px;
height:298px; width: 18px; border: 1px solid #aaa; background:
#silver; margin: 0 0 0 auto;">
		<div id=scrollbar-up-arrow style="height:0; width: 0;border-style:
solid; border-width: 0 6px 10px 6px; border-color: transparent
transparent #aaa transparent; position: absolute; top: 3px; left:
3px;"></div>
		<div id=scrollbar-down-arrow style="height:0; width: 0;border-style:
solid; border-width: 10px 6px 0 6px; border-color: #aaa transparent
transparent transparent; position: absolute; bottom: 3px; left:
3px;"></div>
	</div>

	<div id=scrollwidth-content style="position: absolute; width: 378px;
height: 3px; background: red; top: 150px; left: 100px;"></div>
	<div id=scrollwidth-paddingleft style="position: absolute; width:
50px; height: 3px; background: #f88; top: 150px; left: 50px;"></div>
	<div id=scrollwidth-paddingright style="position: absolute; width:
50px; height: 3px; background: #f88; top: 150px; left: 478px;"></div>
	<div id=scrollwidth-text style="position: absolute; color: red;
width: 478px; top: 153px; left: 50px; text-align: center; background:
#fbb; border-radius: 0 0 8px 8px; padding-top: 2px;">scrollWidth =
padding-left + content width + padding-right</div>

	<div id=clientwidth-content style="position: absolute; width: 380px;
height: 3px; background: blue; top: 200px; left: 50px;"></div>
	<div id=clientwidth-text style="position: absolute; color: blue;
width: 380px; top: 203px; left: 50px; text-align: center; background:
#bbf; border-radius: 0 0 8px 8px; padding-top: 2px;">clientWidth =
padding width - scrollbar width</div>

	<div id=border-label style="position: absolute; bottom: 0; left:
120px; color: black;">border area</div>
	<div id=padding-label style="position: absolute; bottom: 50px; left:
120px; color: gray;">padding area</div>
	<div id=content-label style="position: absolute; bottom: 100px; left:
120px; color: silver;">content area</div>
</div>

(HTML as vector graphic format ftw!)

~TJ
Received on Tuesday, 17 August 2010 20:04:07 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:30 GMT