View Full Version : element's displayed height

31 Dec 2010, 7:14 AM
I have an element at the bottom of my page. I want to find out what height of it is actually visible to the user. I do the following:

var div1 = Ext.get("div1");
var Top = div1.getTop();
var ClientHeight = window && window.innerHeight;
if (!ClientHeight)
ClientHeight=document.documentElement && document.documentElement.clientHeight;
if (!ClientHeight)
ClientHeight = document.body.clientHeight;
var MaxColumnHeight = ClientHeight - Top;

First question is if there is already a function in Ext JS to retreive browser's height.
Second question is why am I getting a height that is 30..40 px higher than the actuall displayed area? Is that because IE stores some place for scroll bars?

31 Dec 2010, 1:43 PM
To calculate the height of the browser viewport:

var viewportHeight = Ext.getBody().getViewSize().height;

The calculation of MaxColumnHeight seems to assume that the user hasn't scrolled down the page. You should probably factor this in too:

var scrollTop = Ext.getBody().getScroll().top;

Potentially there are also edge cases to consider for when the element is completely outside or completely inside the viewport.