anchoring a footer to the bottom of the html page using css
Apr
03
1
0
It's a common need to anchor a footer to the bottom of your web page. It's a tricky problem because you need to account for both large and small content. I've seen people suggest ass-backward ways of doing this with JavaScript. You can achieve this strictly with HTML and CSS with minimal bloat to your markup. All you need is a container div.
Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest the footer with position: absolute, bottom: 0;
/* css */
html, body {
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div id="footer"></div>
</div>
</body>
</html>You might want to add some padding to the bottom of the container so that your content won't run under the footer.
