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!
Share this page on WhatsApp