Keep the footer at the bottom with Javascript

javascript sticky-footer
Keaire picture Keaire · May 16, 2015 · Viewed 13.3k times · Source

At the moment I'm trying to keep the footer at the bottom with Javascript. This is the result:

document.getElementsByTagName('body').onload = function() {KeepFoot()};
var element = document.getElementById('container');
var height = element.offsetHeight;

function KeepFoot() {
    if (height < screen.height) {
        document.getElementById("footer").style.position = "fixed";
        document.getElementById("footer").style.bottom = "0";
        document.getElementById("footer").style.left = "0";
        document.getElementById("footer").style.right = "0";
    }
}

My idea was to take the height of the div container and compare it with the height of the resolution of the pc. If the height of the div container is smaller than the height of the resolution of the PC, set to the div footer position: fixed;

But there is a problem in the script because it doesn't work.

Another question, the script that I created would be fine for keep the footer at the bottom?

HTML:

<html>
    <head>
        ...
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

Answer

Ganesh Uppinivalasa picture Ganesh Uppinivalasa · May 16, 2015

The function is not being called on load. You can attach the function KeepFoot directly to the body tag like this Instead of calling like this: 

 document.getElementsByTagName('body').onload = function() {KeepFoot()};

or use my code from below:

 (function() {
    var offsetHeight = document.getElementById('container').offsetHeight;   
    var screenHeight = screen.height;

if(offsetHeight < screenHeight){
    document.getElementById("footer").style.position = "fixed";
    document.getElementById("footer").style.bottom = "0";
    document.getElementById("footer").style.left = "0";
}
})();

Related questions

How do I get a floating footer to stick to the bottom of the viewport in IE 6?

I know this would be easy with position:fixed, but unfortanately I'm stuck with supporting IE 6. How can I do this? I would rather use CSS to be clean, but if I have to use Javascript, that's not the end …

Read More
Sticky footer, along with scrolling div without specific height

I'd like a page with a sticky footer, and I'd like the content above it to be scroll-able, while maintaining the stickiness of the footer. But I don't want to hard-code the height of the content area, but instead would …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More