Photo By Halacious on Unsplash

How To Make Footer Stick to the bottom of the page

I wanted the footer of my web applications to always stick to the bottom of the page, regardless of the size of the content of the page.

I didn’t want the footer to be displayed in the middle of the page, when the height of the content was small.

Footer is up in the middle of the page. It looks bad.

My Solution

I set a minimum height on the content as some portion of the web browser window height.

One approach was to set the min-height of the content to 100vh ,with vh being the viewport height. This resulted in having to scroll down to see the footer.

Content is minimum 100vh height. Scrolled to see Footer.

Another approach was to calculate the min-height of the content based on the height of the footer, such that we would not have to scroll down to see the footer.

I set the footer height as 7rem and set the min-height of the content as calc(100vh — 7rem) .

The Html

I had a parent container, within which I had the content element, and the footer element.

<div class="container">
    <div class="content">   
       <p>Content</p>  
    </div>  
    <footer class="footer">Footer</footer> 
</div>

The Styling

I set the height of the body to 100%, with no margins or paddings.

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

The container class only set its position to relative. This would prove useful position elements within the container.

.container {
    position: relative;
}

In the content class I set the minimum height, a background color, and I position the text centrally using flex.

.content {
    min-height: calc(100vh - 7rem);
    background: #f7de99;
    display: flex;
    justify-content: center;
    align-items: center;
}

Finally for the footer I set the height, background, and positioned the text centrally as well.

.footer {
    height: 7rem;
    background: #faf598;
    display: flex;
    justify-content: center;
    align-items: center;
}

Please view the demo on my code pen repository.

I may add an article about including a navigation bar in the page sometime in the future.

Please let me know if I made any mistakes, or if there are better ways to do it. Any feedback is appreciated!