The Best Way To Make Sticky Footers

By Focusoncode September 14, 2018

In web design, a sticky footer is a footer that sticks to the bottom of the page regardless of the amount of content on the page. Usually, if a page’s content is shorter than the height of the browser, you end up with a footer that sits in the middle of the page. Because of that, you sometimes get a big undesirable gap between the bottom of the viewport and the footer.

This is a common problem you may come across when building a layout.
Now, there are different methods for creating sticky footers with CSS.
In this article, I’m gonna cover a method that uses the CSS calc function and Viewport Height (vh) unit. This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

Below you will find a demo to see how the code works.

See the Pen sticky footer with calc by focusoncode (@focuson_Code) on CodePen.

In the HTML file, we are going to add a div with class name content. This will contain a header and a button. Then we have the footer tag.

<div class="content">
  <h1>Sticky Footer</h1>
  <button id="paragraph">Add Text</button>
  
</div>
<footer class="footer">
  Footer 
</footer>


In this method, the CSS code is so simple. The code to calculate the height is:


   .content {
	
  min-height: calc(100vh - 70px);
  padding: 40px 40px 0 40px;
}
.footer {
     height: 50px;
    background-color: #0cbf85b3;
    color: aliceblue;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
}

In the calc() is used 70px instead of 50px because the last item can have a bottom margin of 20px. It’s that bottom margin plus the height of the footer that need to be added together to subtract from the viewport height

I have added a jquery function so you can understand the example better. If you are trying this example by your own you should add also

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

in order, the code to work.

Leave a Comment

Your email address will not be published.