Home / Articles / Programming languages / Scripting languages / JavaScript / Researching page and block heights in JavaScript

Researching page and block heights in JavaScript

Researching page and block heights in JavaScript
 
Researching page and block heights in JavaScript
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (2 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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.innerHeight617
window.outerHeight732
window.screen.availHeight724
window.screen.height768
window.screenY-4
window.scrollY2052
window.pageYOffset2052
document.body.clientHeight6896
document.body.scrollHeight6896
document.body.scrollTop0
document.documentElement.scrollTop2052
document.body.offsetHeight6896
document.getElementById(tbl).clientHeight512
document.getElementById(tbl).scrollHeight513
document.getElementById(tbl).offsetHeight513

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.

 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation