There is no such developer who doesn’t have faced CSS sticky footer problem where the page contains a small amount of content. That means the HTML footer sometimes placed up and leaving a blank space under the footer at the bottom while the page content is small. So the developer needs to push down the HTML footer at the bottom according to the viewport.
Today we share a pure CSS solution and discuss how it works actually to stick the footer at the bottom. This solution works fine and has a standard compliant with all browsers. But it fails gracefully on older non-standard browsers.
Browser Compatibility of CSS Sticky Footer
- Firefox for Windows and OSX
- Safari for Windows and OSX
- Google Chrome for Windows and OSX
- Microsoft Internet Explorer 5.5+
- Opera
- Netscape 8
- iPhone Compatible
How the absolute footer works
This is not a rocket science. This is so simple and easy to figure out. Just follow the below steps to implement it on your web page.
HTML Layout for Footer at the Bottom
Just write down a standard HTML5 markup layout with the main container div. We just think a simple layout with a header, content and a footer. That’s it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>How to make a CSS Sticky Footer</title> </head> <body> <div class="container"> <header> <nav> <ul> <li>Navigation Section</li> </ul> </nav> </header> <section class="content"> <div> <div class="info"> <h2>How to Stick the Footer at the Bottom</h2> <p>By <a href="https://cssanimation.io/">CSS Animation io team</a></p> </div> <p>This will be the small content.</p> </div> </section> <footer class="footer"> <p>Copyright CSS Animation io team</p> </footer> </div> </body> </html> |
CSS Code for Footer at the Bottom
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
html, body { margin:0; padding:0; height:100%; } .container { min-height:100%; position:relative; } header { background:#ff0; padding:10px; } .content { padding:10px; padding-bottom:80px; /* Same as the height of the footer */ } .footer { position:absolute; bottom:0; width:100%; height:80px; /* Footer height*/ background:red; } |
In container div, here we set the min-height100% value of container div to ensure to stay the full height of the screen and position to relative. Note that this min-height property is not supported by many older browsers.
The content section is normal but you have to apply a padding-bottom with the same value of footer height.
For the footer set the position to absolute and bottom to 0. That means it moves the footer to the bottom of the container.
One more consideration for Internet Explorer 5.5 and 6 is that they don’t have the support of min-height property but luckily they behave as same with the normal height property. So on IE you need to adjust the container code with below.
|
1 2 3 4 |
#container { height:100%; position:relative; } |
Another way: Using CSS calc() function
You don’t actually need to adjust the height of your main wrapper with the calc() function. Both of those elements are piled with each other on the top without overlapping. Let’s take a look at the following examples –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>make a CSS Sticky Footer using CSS calc() function</title> <style> .content { min-height: calc(100vh - 80px); } .footer { height: 80px; } </style> </head> <body> <div class="content"> Content </div> <footer class="footer"></footer> </body> </html> |
That’s all and a simple and valid way to place your footer at the bottom. Hope you guys have done well.
Thanks for being with cssanimation team.
