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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.