niconico96 0 Newbie Poster

Hello. I'm working on a website that has pages with variable height.
However, the footer is one of my main problems.

When the page can be scrolled, the footer needs to be position: relative .

When the window height is greater that the page content height (no scrollbar), the footer needs to be position: absolute so that it stays at the very bottom (using additional styles, of course) and not in the middle of the page, as position: relative causes.

Right now, the following code works for NON-variable height pages IN WEBKIT BROWSERS ONLY:

setInterval("footer()", 100) // Run the footer-check function every 100ms
function footer(){
	if (window.innerHeight > 900){ // is window height is greater than pg height?
               document.getElementById('footer').setAttribute("class","_abs"); //make position absolute
	} else {
	       document.getElementById('footer').setAttribute("class","_rel"); //make position relative

This sets the class of the footer to "_abs" or "_rel" which changes the position of the footer (relative/absolute) and bottom/left (when it's absolute), as well as the padding (when it's relative).

It doesn't work in firefox, though. (I will test in I.E. later).

Can anyone suggest a way to make this work with variable height pages?
Can anyone suggest a way to make this work in Firefox, and if possible, ALL browsers?
Also, is it possible for any of this to be done without javascript?

Thanks very much in advance.