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>
<html>
    <head>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
 
            body {
                font-size: 20px;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
 
            }
 
            #main-content {
                padding: 10px;
            }
 
            p {
                margin-bottom: 10px;
            }
        </style>
 
    </head>
    <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. 
            </p>
            <p>
                This is some random text.
            </p>
 
        </div>
        <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.
        </div>
    </body>
 
    <script>
        function stickFooterToBottom() {
            document.body.style.height = "100%";
            document.body.style.width = "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)
            {
                footerDiv.style.position = "absolute";
                footerDiv.style.bottom = "0px";
                document.body.style.height = winHeight + "px";
                footerDiv.style.width = bodyWidth + "px";
 
            } 
            else {
                footerDiv.style.position = "static";
                footerDiv.style.width = bodyWidth + "px";
            }
        }
        stickFooterToBottom();
    </script>
</html>

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 cs-fundamentals.com. He is a software professional (post graduated from BITS-Pilani) and loves writing technical articles on programming and data structures.

Today's Tech News

German spy agency warns of Chinese LinkedIn espionagePosted on Sunday December 10, 2017

Germany's spy agency says China is using the site to gather information on politicians.

Bitcoin futures trading begins on CBOE exchange in ChicagoPosted on Monday December 11, 2017

Trading in futures contracts is a step towards legitimising the digital currency, its supporters say.

Calls for Twitch to police 'sexual streaming'Posted on Saturday December 09, 2017

The game streaming site has been criticised for tolerating a growing number of 'sexual streamers'

Courtesy BBC News

AD BLOCKER DETECTED!

Advertisements help running this site for free.


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

×