Web page Footer Styling
1 min readFeb 11, 2016
Recently while creating a web site I wad stuck again about creating a footer which sticks to the bottom of the web page. It took me again some time to remember how to do it, so I want to share this solution.
The structure of the html code is the following:
<html>
<body>
<div id=”wrapper”>
<div>
Main Website Content…
</div>
<footer>
The content of the footer here!
</footer>
</div>
</body>
</html>What we need to do is remove the padding and margin from html and body and set height to 100%
html,
body{ height: 100%; padding: 0; margin: 0;
}
Let’s style the #wrapper which is going to be the main content of the website
#wrapper{ min-height: 100%; position: relative; overflow: hidden;
}
Finally let’s style the footer element and we are done
footer{ left: 0px; bottom: 0px; width: 100%; height: 100px; background-color: red;
}
In case there is not enough content in the page, then the footer will not stick to the bottom. In that case just add the following at the footer selector:
position: absolute;