How to place footer at the bottom of page or content which is lower.

Himanshu Sahu — Fri, 13 May 2022 08:59:52 +0000

First create a container which contains all the elements or components. Then create header, main-content, and footer.

HTML
<div class="container">
         <div class="header">This is navbar/header</div>
         <div class="main-content"></div>
         <div class="footer">This is footer</div>
      </div>

Add some styling to the main container as it will contain all our data, so we are using flex and flex direction column. We also giving min-height: 100vh so that the container will have the full height of the viewport.

.container{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

Now, we will add some styling to the footer we have to give bottom:0; so that it will stick to the bottom of container and we also have to give margin-top : auto; so it will push the footer to bottom as mush as possible.

.header{
    width: 100%;
    background-color: bisque;
    height: 8vh;
    text-align: center;
}
.main-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: azure;
}
.footer{
    bottom: 0;
    margin-top: auto;
    text-align: center;
    background-color: rgb(154, 178, 178);
    width: 100%;
    height: 8vh;
}

DEV Community: Himanshu Sahu

How to place footer at the bottom of page or content which is lower.