BulmaCSS: Sticky Footer

Problem

When building a website I often want to make sure the footer sticks to the bottom of the page. Even when there isn't enough content to fill the entire page.

Solution

The following example shows how to setup your HTML and CSS so that the footer sticks to the bottom of the page if the page content is short.

HTML

<div class="wrapper-root">
  <div class="wrapper-content">...</div>
  <footer class="footer">...</footer>
</div>

CSS

.wrapper-root {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.wrapper-content {
  flex: 1;
}

There are a few things going on:

1. Set the min-height of the page to the view-height (browser window height)
2. Split the page into 2 sections:
   1. Content
   2. Footer
3. Set the content section to auto-expand (flex: 1)

Details

I love Bulma CSS. However, the main issue I come across when using it is the footer showing half-way up the page when the page is mostly empty. The solution above fixes that issue.

This approach ensures the footer is always show either a) at the bottom of the content (if the content extends beyond the screen), or b) at the bottom of the screen (if the content is smaller than the screen).

The footer will not always be fixed at the bottom of the browser window.

Note

When I first implemented this, the page was not rendering correctly. I found the problem was how I was defining the .container class. My code looked like:

<div class="wrapper-root">
    <div class="wrapper-content container">
        ...
    </div>
    <footer class="footer"></footer>
</div>

But it should have been:

<div class="wrapper-root">
  <div class="wrapper-content">
    <div class="container">...</div>
  </div>
  <footer class="footer"></footer>
</div>

Make sure you don't apply the custom .wrapper-content style and Bulma's .container style to the same div element.