Responsive Sticky Footer On Page Resize Using HTML, CSS, and JS

There are many brief solutions on internet for sticking the footer to the bottom of the page, but most of them fails either on page resize or they use additional wrapper DIV tags to fix footer at the bottom of the page. Last week I was asked this question on mail, how to fix a footer to the bottom of the page responsively? I tried it with the help of a small fragment of JavaScript code that gets executed on onload and onresize events. This piece of Javascript code computes the height of the viewport and body, if viewport's height is greater than body's height then it body height is set to viewport's height and footer is placed at the bottom of the body with position absolute ELSE body's height is set to 100% and footer div's position is set to static. The solution provided here may not be optimized but it gives you at least an idea for how to proceed.

Following code snippet demonstrates the sticky responsive footer, which stick to the bottom of the page all the time. I could use JQuery as well instead of JavaScript but I wanted to avoid including JQuery and keep solution as simple as possible.

<!doctype html>
            * {
                padding: 0;
                margin: 0;
            body {
                font-size: 20px;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
            #main-content {
                padding: 10px;
            p {
                margin-bottom: 10px;
    <body onresize="stickFooterToBottom()">
        <div id="main-content">
            <p style="color: blue;">
                This sticky footer example is implemented using html, css and javascript. 
                When page gets loaded or browser window is resized, Javascript function 
                <code>stickFooterToBottom()</code> runs and calculate the height of view 
                port and body content. If the height of viewport is greater than body 
                height then sets body height to vieport's height and places footer content 
                at the bottom of the body with position absolute ELSE places the footer 
                content just below the <i>main-content</i> div and set position static for 
                footer div. 
                This is some random text.
        <div id="footer" style="background-color: grey; padding: 10px 0; 
		                        box-sizing: border-box; text-align: center;">
            It is sticky footer. It always sticks to the bottom of the page.
        function stickFooterToBottom() {
   = "100%";
   = "100%";
            var winHeight = window.innerHeight;
            var winWidth = window.innerWidth;
            var bodyHeight = document.body.offsetHeight;
            var bodyWidth = document.body.offsetWidth;
            var footerDiv = document.getElementById("footer");
            var footerHeight = footerDiv.offsetHeight;
            If the height of body content is less than viewport height, then set 
			body's height to viewport's height and fix footer div to the bottom 
			of the body else set footer's position to static so that it appears 
			at the bottom naturally.
            if(winHeight > bodyHeight)
       = "absolute";
       = "0px";
       = winHeight + "px";
       = bodyWidth + "px";
            else {
       = "static";
       = bodyWidth + "px";

In order to run above piece of code in your browser copy the code, paste it into any notepad and save with .html extension, then simply double click on the newly created file.

Last Word

Hope you have enjoyed reading this tutorial on Responsive Sticky Footer. Please do write us if you have any suggestion/comment or come across any error on this page. Thanks for reading!

Get Free Tutorials by Email

About the Author

is the main author for He is a software professional (post graduated from BITS-Pilani) and loves writing technical articles on programming and data structures.

Today's Tech News

Plans drawn up for world's tallest wooden skyscraperPosted on Monday February 19, 2018

The 70-storey tower would be 90% wood and have trees and other foliage on every level.

Probe after 'drone made helicopter crash'Posted on Monday February 19, 2018

Investigations are launched after a helicopter reportedly crashed after swerving to avoid a consumer drone.

Dark web paedophile Matthew Falder jailed for 32 yearsPosted on Monday February 19, 2018

Matthew Falder blackmailed victims into sending sexual images that he then shared on the dark web.

Courtesy BBC News


Advertisements help running this site for free.

To view the content please disable AdBlocker and refresh the page.