Creating a Sticky Header with Bulma CSS

Bulma CSS is a library that uses the flex standard to create modern layouts. One thing that is does well is to allow extension of the library by defining some common rules to follow. A pattern that happens quite a bit is to have a ‘footer’ of content that is at the bottom of a page no matter how little content is on the page but will scroll below the content if there is more than one screen’s worth.

Some calls this a ‘sticky’ footer (not to be confused with ‘fixed’).

The easiest solution is to use flex box by wrapping the page with a ‘tall’ container. We can use the body or some div.

Define a class that will cause whatever element to take up as much space as possible.

1
2
3
4
5
.is-tall {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

And next add a container that can be placed inside that will ‘grow’

1
2
3
.is-tall-container {
  flex: 1;
}

The appropriate HTML will look like this.

1
2
3
4
5
6
7
<html>
<head><title></title></head>
<body class='is-tall'>
<header></header>
<main class='is-tall-container'></main>
<footer></footer>
</html>

Or with <div>s

1
2
3
4
5
<div class='is-tall'>
<header></header>
<main class='is-tall-container'></main>
<footer></footer>
</div>

Finally, the header will be stuck to the top!