David said:Right. But, as noted, all a waste of time as the keyboard still
works. It's just a silly effect.
I don't think scrolling with the keyboard will still be possible after the
`overflow' property of the style object has been set to "hidden".
It should be noted, though, that there is a bug in WebKit/525.27.1 (Safari
3.2.1): you need to assign "scroll" to the property in order to restore the
scrollbars; "" or "auto" does not work.
[snip]
- I didn't handle the height bug in Opera 9 in this example, there'sa
test and workaround for that in the group FAQ.
That entry needs some rewriting.
"What the number returned from either of these properties represents
depends on the environment. The environment includes the browser, its
version, and the rendering mode of the document. In quirks mode, we'll
mostly want to use body.clientHeight (except for in Safari 2)."
What it boils down to is the outermost scrolling element. Normally
this is the documentElement. In IE quirks mode (and IE < 6), it is
the body.
" document.body.clientHeight
Some environments will return the viewport height. Others will return
0. Yet others will return the clientHeight of the BODY element."
"I don't know about 0, except not to use it, most will indeed return
the client height of the body, which may or may not be a good starting
point for determining the viewport height (depends if it is the
outermost scrolling element.)
document.documentElement.clientHeight
This is the more "standard" property for getting the height of the
viewport. It usually "works" in modern browsers in standards mode."
No, this is the standard way to measure the client height of the
documentElement. In IE quirks mode (and IE < 6), it is 0, which is a
great indicator that it is useless (the HTML element is not rendered.)
"Notable exceptions include Safari 2 and Opera <= 9.25, both of which
return the clientHeight of the html element. (Oddly, Opera <= 9.25 in
standards mode returns the width of the viewport for
documentElement.clientWidth)."
Not sure about Safari 2, but the Opera problem is that it returns the
scrollHeight instead of the clientHeight (and this bug is not present
inclientWidth.)
"Conversely, document.body.clientHeight will return the height of the
viewport in most cases where document.documentElement.clientHeight
does not. An exception to that is Safari 2, where
documentElement.clientHeight and body.clientHeight both return the
height of their corresponding element (not what we want). "
The client height of the outermost scrolling element is exactly what
we want.
At the very least, the explanation needs to be updated.
[snip]- I didn't handle the height bug in Opera 9 in this example, there's a
test and workaround for that in the group FAQ.That entry needs some rewriting."What the number returned from either of these properties represents
depends on the environment. The environment includes the browser, its
version, and the rendering mode of the document. In quirks mode, we'll
mostly want to use body.clientHeight (except for in Safari 2)."What it boils down to is the outermost scrolling element. Normally
this is the documentElement. In IE quirks mode (and IE < 6), it is
the body." document.body.clientHeightSome environments will return the viewport height. Others will return
0. Yet others will return the clientHeight of the BODY element.""I don't know about 0, except not to use it, most will indeed return
the client height of the body, which may or may not be a good starting
point for determining the viewport height (depends if it is the
outermost scrolling element.)document.documentElement.clientHeightThis is the more "standard" property for getting the height of the
viewport. It usually "works" in modern browsers in standards mode."No, this is the standard way to measure the client height of the
documentElement. In IE quirks mode (and IE < 6), it is 0, which is a
great indicator that it is useless (the HTML element is not rendered.)"Notable exceptions include Safari 2 and Opera <= 9.25, both of which
return the clientHeight of the html element. (Oddly, Opera <= 9.25 in
standards mode returns the width of the viewport for
documentElement.clientWidth)."Not sure about Safari 2, but the Opera problem is that it returns the
scrollHeight instead of the clientHeight (and this bug is not present
inclientWidth.)"Conversely, document.body.clientHeight will return the height of the
viewport in most cases where document.documentElement.clientHeight
does not. An exception to that is Safari 2, where
documentElement.clientHeight and body.clientHeight both return the
height of their corresponding element (not what we want). "The client height of the outermost scrolling element is exactly what
we want.
No, we want the height of the viewport, sans scrollbars.
You're thinking is influenced by the design of IE 6, which has
influenced the other major browsers.
IE treats the root element as the viewport. In IE < 6 / IE quirks,
that element is document.body. IE has
Right.
document[elementThatActsAsRoot].clientHeight to return the
clientHeight of that element.
So thinking about things from an IE-perspective, your line of thinking
makes sense, as the height of that element would be the viewport size.
To illustrate how the height of the outermost element is *not* the
viewport size in FF, Opera, and Webkit, we can create a border on it
and give it a height that is taller than the viewport.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>height test </title>
<style type="text/css">
html { border: 11px solid lime; }
#bottomText {
position: absolute; bottom: 0;
}
</style>
</head>
<body style="border: 5px solid red;
padding: 1px 2px 3px 4px">
<div style="height: 2000px;position: relative">
<div id="bottomText">
<p>
This text should appear on the bottom of the document.
</p>
There should be a green border that extends to the bottom of the
document.
</div>
</div>
</body>
</html>
In IE6, the outer border wraps the viewport. The documentElement has
Right.
the scrollbar. That is why setting overflow: hidden should hide the
scrollbar in IE; in IE, that makes sense. In other browsers, this
behavior is copied because IE did it.
The root element is HTML. This element is supposed to live inside an
element called the "initial containing block" (ICB). The ICB has the
dimensions of hte viewport. There does not appear to be any means by
which to access the ICB. It seems as the ICB, in IE, is the
documentElement, but in other browsers, is the viewport itself.
I can work on that.
Want to reply to this thread or ask your own question?
You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.