How to Create Sticky Header and Footer Using CSS

Hey Techies! Today I'm going to explain how to create fixed header and footer using CSS. You can create fixed or sticky header and footer using the CSS position property. You just need to apply the CSS position property with the value fixed in combination of top and bottom properties to place the element on the top or bottom of the viewport accordingly.

Your elements have to be placed like this:

<div id="container">
<header>Write Your Text Here</header>
...
<footer>Powered by Hashnode</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 have to write this:

header
{ position: sticky; top: 0; }
footer
{ position: sticky; bottom: 0; }
}