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

2109 0 0 0

Last Updated : 2024-07-16 15:25:19

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>?

    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 .