Making the footer always at the bottom if there is little or no content in the page

77 0 0 0

Last Updated : 2020-10-24 11:34:09

Sometimes you will need to show the footer at the bottom of the page when there is little or not content. and not directly after the contents because this makes the footer alittle bit lifted up and not elegantly shown on the page.

There are numerous solutions & suggestions for this situation, Here are some of them:



  1. Use a page container that has a min-height of 100vh, and the header outside it and inside it add a div for the contents and the footer. make the page container position relative and the footer and header absolute.
        <header>
    Header
    </header>

    <div class="pageContainer">
    <div class="contents">
    Contents
    </div>
    <footer>
    Footer
    </footer>
    </div>

        <style>
    *{padding:0px; margin:0px;}
    .pageContainer{
    background-color:#EAEAEA;
    /* min-height: 100vh; */
    min-height: calc( 100vh - 80px );
    position: relative;
    padding-top: 80px;
    }
    .contents{
    border: 1px solid red;
    height: 600px;
    padding-bottom: 50px;
    }
    header{
    background-color: aqua;
    height: 80px;
    z-index: 100;
    position: absolute;
    left: 0px;
    right: 0px;
    }
    footer{
    background-color: #fff;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
    }
    </style>​


  2. The second suggestion would be to add a header, a div for content and a footer. Now make the body style to be 100% height, and relative position. with the footer to be absolutely positoned to bottom and add content after the body as a block with the same height as the footer so that the contents doesn't hide behind the footer.
    	<header>
    CLS
    </header>
    <section class="mainContents">
    Here is the main contents <br>
    </section>

    <footer>
    All Rights Reserved &copy; @ sahaly.info
    </footer>

     *{padding: 0px; margin: 0px;}
    body{
    min-height: 100vh;
    position: relative;
    border: 2px solid red;
    }
    body:after{
    content: '';
    display: block;
    height: 50px;
    }
    header{
    background-color: rgb(29, 141, 233);
    height: 80px;
    }
    .mainContents{
    background-color: lightgray;
    min-height: 300px;
    }
    footer{
    background-color: #333;
    position: absolute;
    height: 50px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    }​


  3. Third Suggestion is really simple. add header, div for content and footer. Make the body min-height to be 100vh and its display as table, then the footer display as a table-row:
        <header>
    Header
    </header>

    <div class="mainContents">
    Content goes here <br>
    </div>

    <footer>
    Footer
    </footer>​

    <style>
    *{padding:0px; margin:0px;}
    body{
    border: 2px solid red;
    box-sizing: border-box;
    min-height: 100vh;
    width: 100%;
    display: table;
    }
    footer{
    height: 50px;
    background-color: lightgreen;
    display: table-row;
    }
    header{
    height: 80px;
    background-color:lightsalmon;
    }
    </style>


  4. Fourth suggestion is so easy too. make a div for the contents (header, nav, aside and every thing except the footer), and a footer. Make the height of the content div 100vh - footer height, that's it.
    <div class="allButFooter">
    <!-- Your page's content goes here, including header, nav, aside, everything -->
    Content goes here
    </div>

    <footer>
    <!-- Footer content -->Copy Rights
    </footer>​

    <style>
    *{
    padding: 0px;margin: 0px;
    }
    .allButFooter{
    min-height: calc( 100vh - 50px );
    width: 100%;
    }

    footer{
    height: 50px;
    background: magenta;
    width: 100%;
    }
    </style>


  5. -

Mohammed Anwar

Mohammed Anwar

Experienced technical lead PHP, MySQL and Laravel Developer for 15+ years, with proven ability to develop and create high-quality and optimized web applications. Great ability to build and optimize database design, schema and queries. Versed programing trainer and instructor delivering web courses and helping others to get into the field in a timely manner. Fast and eager learner for new technologies .