How to create sticky headers and footers with CSS

CSS offers a native way to create headers and footers that fix at the top (or at the bottom) of the screen.

Both ways, your elements have to be placed like this:

<div id="container">
  <header>...</header>
  ...
  <footer>...</footer>
</div>

Where the #container element is the one that users will scroll by. In other words, your header or footer will not be sticky to the screen if it has another element surrounding them.

At your CSS, you will just have to do this:

header {
  position: sticky;
  top: 0;
}

footer {
  position: sticky;
  bottom: 0;
}

Result:

Comments

[Gustavo Scarpim]

Simple and easy.
Nice!

[Z•X]

Thanks dude