This content originally appeared on DEV Community and was authored by Juan Belieni
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:
This content originally appeared on DEV Community and was authored by Juan Belieni
Juan Belieni | Sciencx (2021-08-24T23:50:29+00:00) How to create sticky headers and footers with CSS. Retrieved from https://www.scien.cx/2021/08/24/how-to-create-sticky-headers-and-footers-with-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.