<tutorialjinni.com/>

Sticky Footer - Keep Footer at the Bottom of the Page using CSS3

Posted Under: CSS3, HTML5, Tutorials on Dec 26, 2016
Sticky Footer - Keep Footer at the Bottom of the Page using CSS3
This tutorial shows how to put footer at the bottom of webpage using pure CSS3. Footer will stay at the bottom even if there is no content in the body. There is no hack involve in this technique.

We will be using view port height CSS3 measurement unit for it. We will set the height of the content div to the 100vh of webpage height minus the combine height of header and footer. 
<style>
   min-height: calc(100vh - 200px);
</style>
Here 200px is the combine height of header and footer. Below is the complete code. 
<!DOCTYPE html>
<html>
    <head>
        <title>Fix footer to the bottom of Page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #header{
                background-color: #ffcf40;
                height: 100px;
            }
            #body{
                background-color:#ffbf00;
               min-height: calc(100vh - 200px);
            }
            #footer{
                background-color: #bf9b30;
                height: 100px;
            }
            body{
                margin: 0;
                padding: 0;
                color: #FFF;
                font-family: cursive;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div id="header">
            This is the Header of the page
        </div>
        <div id="body">
            This is the Body of the page
        </div>
        <div id="footer">
            This is the Sticky Footer page <br/>
            It will stick to the bottom of page
        </div>
    </body>
</html>
Above code will render like the following image. It will retain its structure during resizing.

Sticky Footer - Keep Footer at the Bottom of the Page using CSS3

This code is tested in all major modern browsers.


imgae