DEV Community

Cover image for How to create sticky headers and footers with CSS
Juan Belieni
Juan Belieni

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Discussion (3)

Collapse
guscarpim profile image
Gustavo Scarpim

Simple and easy.
Nice!

Collapse
zixhenny profile image
Z•X

Thanks dude

Collapse
volcareso profile image
volcareso

Short and simple