Keep the footer at the bottom with Javascript

L

4

7

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>

Lawn answered 16/5, 2015 at 14:37 Comment(1)

Why not use the CSS sticky footer (HTML5 version) method? – Sufferance 16/5, 2015 at 14:59

P

3

"DOMContentLoaded" event only fires when document is ready similar to jquery's $(document.ready).

and, for styles you can use class instead of setting each style using javascript.

Code

document.addEventListener("DOMContentLoaded", function (event) {
    var element = document.getElementById('container');
    var height = element.offsetHeight;
    if (height < screen.height) {
        document.getElementById("footer").classList.add('stikybottom');
    }
}, false);

#footer.stikybottom {
    position: fixed;
    bottom:0;
    left: 0;
    right:0;
}

<div id="container">
    <div id="header">header</div>
    <div id="content">Conent</div>
    <div id="footer">Something in footer</div>
</div>

Provencher answered 16/5, 2015 at 15:2 Comment(4)

Please add an explanation of what your code does and why you wrote it that way. Code-only answers are generally frowned upon. – Tyrothricin 16/5, 2015 at 15:4

Thanks jed-panda, now it works. And thanks for the suggestion to add a class. – Lawn 16/5, 2015 at 16:5

This won't work if the screen height is too small to fit the footer + the content. – Cp 16/10, 2017 at 21:8

screen.height returns the height of the user's screen including the interface features like the Windows Taskbar or Macs Dock. If you want the true height available for the browser, you should use the other function screen.availHeight – Equal 23/1, 2023 at 7:58

G

4

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";
}
})();

Gerlachovka answered 16/5, 2015 at 15:13 Comment(0)

P

3

"DOMContentLoaded" event only fires when document is ready similar to jquery's $(document.ready).

and, for styles you can use class instead of setting each style using javascript.

Code

document.addEventListener("DOMContentLoaded", function (event) {
    var element = document.getElementById('container');
    var height = element.offsetHeight;
    if (height < screen.height) {
        document.getElementById("footer").classList.add('stikybottom');
    }
}, false);

#footer.stikybottom {
    position: fixed;
    bottom:0;
    left: 0;
    right:0;
}

<div id="container">
    <div id="header">header</div>
    <div id="content">Conent</div>
    <div id="footer">Something in footer</div>
</div>

Provencher answered 16/5, 2015 at 15:2 Comment(4)

Please add an explanation of what your code does and why you wrote it that way. Code-only answers are generally frowned upon. – Tyrothricin 16/5, 2015 at 15:4

Thanks jed-panda, now it works. And thanks for the suggestion to add a class. – Lawn 16/5, 2015 at 16:5

This won't work if the screen height is too small to fit the footer + the content. – Cp 16/10, 2017 at 21:8

screen.height returns the height of the user's screen including the interface features like the Windows Taskbar or Macs Dock. If you want the true height available for the browser, you should use the other function screen.availHeight – Equal 23/1, 2023 at 7:58

T

2

I thing your function works very well. maybe what is missing is the function calling.

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";
    }
}

KeepFoot();

see this jsfiddle

Tamarah answered 16/5, 2015 at 14:54 Comment(0)

U

0

If what you want is to maintain the footer on the bottom of the page, you must read this. cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

You can do it without js.

Underproof answered 16/5, 2015 at 15:5 Comment(0)

Recommended topics

Hot tags