Researching page and block heights in JavaScript
When you create HTML page the width of an element is usually already specified (in percentage or in pixels), but the height can often vary, depending on the content. Common problems associated with block height are: scrolling down to a specific place; positioning the block in the center or in the bottom of the page; positioning one block relative to another, etc. The last problem is related to the absolute displacement. Unfortunately CSS not always helps, especially if the page is dynamic, but the JavaScript...
Page height
Methods to set the height of the window object:
| Property | Description |
|---|---|
| innerHeight (innerWidth) | sets height of the content area of the window |
| outerHeight (outerWidth) | sets height of window |
| screen.availHeight (screen.availWidth) | height of the working area screen in pixels (excluding the height of the tool bar) |
| screen.height (screen.width) | screen height in pixels |
| screenY (screenX) | the distance from the top of the screen to the upper boundary of the browser window |
| scrollY (scrollX) | vertical scroll of the document |
| pageYOffset (pageXOffset) | current vertical position of the page relative to the top left window corner |
Note that not all browsers, first, support these properties, and second, not all property values coincide. Also, do not forget that these are all properties of the object window, which means that they apply only to the object window, so you can not write document.getElementById(id).innerHeight etc. Unfortunately, in the testing process (IE 6, FF 2.0, Opera 9.25) it was found that all the browsers support only window.screen.availHeight and window.screen.height (see summary table below). But in most cases this was not enough, it is often necessary to know the height of the block or container, so you should look for other ways of finding the height.
| Property | Description |
|---|---|
| clientHeight (clientWidth) | height of a block without scroll |
| scrollHeight (scrollWidth) | height of a block including scroll |
| scrollTop (scrollLeft) | vertical displacement of the current position relative to the upper boundary of the block |
| offsetHeight (offsetWidth) | height of a block with\without scroll (depends from the browser) |
Important note: these properties must be used after the page is fully loaded, otherwise the values may differ from what they really are. Why? Try to guess...
Summary table (for screen 1280х1024)
| Property | without DOCTYPE | !DOCTYPE XHTML 1.0 Transitional |
||||
|---|---|---|---|---|---|---|
| IE (6) | FF (2.0) | Opera (9.25) | IE (6) | FF (2.0) | Opera (9.25) |
|
| window.innerHeight | undefined | 807 | 848 | undefined | 807 | 848 |
| window.outerHeight | undefined | 979 | 911 | undefined | 979 | 911 |
| window.screen.availHeight | 971 | 971 | 971 | 971 | 971 | 971 |
| window.screen.height | 1024 | 1024 | 1024 | 1024 | 1024 | 1024 |
| window.screenY | undefined | -4 | -23 | undefined | -4 | -23 |
| window.scrollY | undefined | changes depend from the scroll | undefined | undefined | changes depend from the scroll | undefined |
| window.pageYOffset | undefined | changes depend from the scroll | changes depend from the scroll | undefined | changes depend from the scroll | changes depend from the scroll |
| document.body.clientHeight | 846 | 807 | 848 | 3196 | 3124 | 3136 |
| document.body.scrollHeight | 3252 | 3202 | 3166 | 3196 | 3124 | 3136 |
| document.body.scrollTop | changes depend from the scroll | changes depend from the scroll | changes depend from the scroll | 0 | 0 | 0 |
| document.documentElement.scrollTop | 0 | 0 | 0 | changes depend from the scroll | changes depend from the scroll | changes depend from the scroll |
| document.body.offsetHeight | 850 | 3192 | 848 | 3196 | 3124 | 3136 |
| document.getElementById(this_tbl).clientHeight | 361 | 371 | 361 | 361 | 370 | 361 |
| document.getElementById(this_tbl).scrollHeight | 361 | 371 | 361 | 361 | 370 | 361 |
| document.getElementById(this_tbl).offsetHeight | 361 | 371 | 361 | 361 | 370 | 361 |
Your browser (an example on how to get property values before the page has fully loaded, don't forget to refresh)
| window.innerHeight | 617 | |
| window.outerHeight | 732 | |
| window.screen.availHeight | 724 | |
| window.screen.height | 768 | |
| window.screenY | -4 | |
| window.scrollY | 2052 | |
| window.pageYOffset | 2052 | |
| document.body.clientHeight | 6896 | |
| document.body.scrollHeight | 6896 | |
| document.body.scrollTop | 0 | |
| document.documentElement.scrollTop | 2052 | |
| document.body.offsetHeight | 6896 | |
| document.getElementById(tbl).clientHeight | 512 | |
| document.getElementById(tbl).scrollHeight | 513 | |
| document.getElementById(tbl).offsetHeight | 513 |
Note: the values in the table depend from the individual settings (toolbars, status bars, font size, etc.), so they may differ from yours even if the browser versions are the same.
Conclusions
- DOCTYPE affects the values of the parameters described above;
- when determining the height of the screen you can always rely on window.screen.height;
- to find the height of the visible part of a page or block use document.getElementById (id). clientHeight, including scroll - document.getElementById (id). scrollHeight.
