Closed Bug 189112 Opened 22 years ago Closed 14 years ago

implement document.clientWidth and document.clientHeight just like Safari


(Core :: DOM: Core & HTML, defect)

Not set





(Reporter: dhtmlkitchen, Unassigned)


(Whiteboard: wontfix?)


(1 file, 1 obsolete file)

window.innerWidth/Height includes scrollbars, if present. 

Web designers and UI developers sometimes need to know the viewable dimensions
of the viewport. These dimensions do not include the scrollbars.

It is not appropriate to modify the values returned by window.innerWidth/Height
so that said values exclude scrollbars because to do so would change/break
programs that rely upon this.

For these reasons, it is necessary to add a new property that will return the
width excluding scrollbars and all other chrome. This will ensure both forward
and backward compatibility. No sites will break. It is a small but necessary
feature to add.

I propose mozilla support:
// width of the initial containing block (the viewport) excluding any scrollbars.

// height of the initial containing block (the viewport) excluding any scrollbars.

                              Q & A 
Q: What about document.height and document.width?
The values returned from these properties vary between browsers. Mozilla gives
measurements from the body. document.height measures the height of the
documentElement in safari and the height of the body in Mozilla --not the viewport.
document.width measures the the width of the viewport in safari and the width of
the body in Mozilla.
describes different behavior. 

Q: bug 156388 says that the viewport should be measured by

documentElement.clientHeight returns 0 in Mozilla. It does not return the
clientHeight of the root element which may be different from the height of the
viewport in Mozilla. Internet Explorer automatically sizes the root element so
that its outer dimensions (border, scrollbars if any) are inside the ICB
(initial containing block). 

Mozilla grants more flexibility to the root element. It allows the root to be
sized like any other block element. In Mozilla, the height of the viewport and
the height of the root element are completely unrelated. Since this is a
confusing matter to even above average web developers, returning 0 for
documentElement.clientHeight/Width allows conditional statements such as the
following to work:

if(document.documentElement.clientWidth) {

else if(document.body.clientWidth) {


The first statement will always fail in mozilla because 0 is converted to false
when a boolean value is expected.

Q: doesn't document.body.clientWidth/Height already give us the dimensions of
the viewport.

Yes, they do. This is a bug and should be fixed. The width of the body and the
width of the viewport may be totally unrelated. document.body.clientWidth does
not return the clientWidth of the body, but instead returns the width of the
viewport. This is definitely incorrect and should be fixed right away.

The correct implementation this feature will make it possible to measure the
initial containing block in Mozilla. This is a necessary feature.

See also:
bug 48634
bug 156388
This only works in Safari
Attached file Testcase
Attachment #111591 - Attachment is obsolete: true
wrong component.
Assignee: asa → jst
Component: Browser-General → DOM Mozilla Extensions
OS: MacOS X → All
QA Contact: asa → ian
Hardware: Macintosh → All
Attachment #111592 - Attachment description: ignore first attachment → Testcase
Mass-reassigning bugs to
Assignee: jst → dom_bugs

*** This bug has been marked as a duplicate of 156388 ***
Closed: 19 years ago
Resolution: --- → DUPLICATE
this is not a duplicate.

Read the bug title closely.

we're looking for document.clientWidth. That would be the clientWidth of the ICB.

Bug 156388 is all about document.documentElement.clientWidth. That's the clientWidth of the documentElement. 

No surprise it got marked invalid. Hardly anyone seems to know the difference between the HTML element and the ICB. 

Resolution: DUPLICATE → ---
Assignee: general → nobody
QA Contact: ian → general
Regardless whether this bug is fixed or not, the following code for obtaining the view size sans any scrollbar(s), should work:

I understand this bug report proposes a "fix" to document.body.client[Width|Height], so as to always report the <body> element's dimensions in the client (instead of the body's ICB, which is the viewport size sans any scrollbar(s)), which would thus also require adding document.client[Width|Height] to report the document's ICB.

Thus apparently what this bug fix will effectively gain is that the <body> element's true client[Width|Height] will be more readily accessible. Without this bug fix, I assume it is theoretically possible to obtain the equivalent by placing a <div style='margin:0 padding:0'> as the first child of a <body style='margin:0'>. This workaround should continue to function correctly even after this bug is fixed.
On further thought, if the <body> element's margins are 0, then the document.body.Scroll[Width|Height] should provide the values expected for a fixed document.body.client[Width|Height].

If the <body> element's margins are not 0, adding their ComputedStyle values to the document.body.Scroll[Width|Height] should provide the values expected for a fixed document.body.client[Width|Height].
After further study, I think this bug report is invalid, or should be marked as feature request instead:

The assertion that document.body.client[Width|Height] should not be the same as the viewport excluding (if any) scrollbar(s), is apparently wrong.

It appears that document.body.scroll[Width|Height] provides the size of the content of document body.

Thus apparently this bug report is only valid as a feature request to add document.client[Width|Height], but this unnecessary as I explained in Comment #7.
It looks like only WebKit supports this. I think we should wontfix. Jst?
Whiteboard: wontfix?
Sounds right, at this juncture.

Seems documentElement.clientXXX properties now reflect viewport dimensions, not the dimensions of the root element.

If document.clientXXX had gone in 6 years ago, it would have made a big difference in the web today. And it should have.
Closed: 19 years ago14 years ago
Resolution: --- → WONTFIX
Component: DOM: Mozilla Extensions → DOM
Component: DOM → DOM: Core & HTML
You need to log in before you can comment on or make changes to this bug.