Friday, November 17, 2006

Height of the Page, no questions asked

When creating a popover for a web app I was writing, I needed to get the internal height of the page, so I could set the popover to the pages height. There are other techniques to achieve this such as setting


html {
overflow: hidden;
}

body {
overflow: auto;
}


then absolutely positioning the div, but this can result in rendering bugs in IE anytime you try to relatively position an element. (usually the element doesn't move when you scroll the page)
So the simple solution is to use javascript to get the pages height when the popover is supposed to be show. For the popover I was working on, I did not want to change the underlying page's doctype (or lack there of) The problem was that document.documentElement.clientHeight only works with a doctype. To make a long story short, I came up with this line of code that should return the pages complete height no matter what.


Math.max((window.innerHeight || 0), document.body.clientHeight, document.documentElement.clientHeight, document.body.scrollHeight)


Simple, parts might be repetitive, but it works

1 comment:

Andrew Sutherland said...

Sweet, this might come in handy for my Quizmarklet

Thanks!