DEV Community

alok-38
alok-38

Posted on

Understanding the Magic Behind a Fixed Footer in CSS

#webdev #css #frontend

Footers are a staple of web design, but keeping them neatly pinned to the bottom of the screen can sometimes feel like magic.
In this post, we’ll break down how CSS lets you create a fixed footer that stays in place no matter how you scroll.

🛠️ Mini-Tutorial: Creating a Fixed Footer in CSS

Step 1: HTML Structure

First, set up a simple page with a <footer> element.

<body>
  <main>
    <h1>Welcome to My Page</h1>
    <p>Some content here...</p>
  </main>

  <footer>
    &copy; 2025 My Website
  </footer>
</body>
Enter fullscreen mode Exit fullscreen mode

Step 2: Apply Basic Footer Styles

Use CSS to give your footer some background color, padding, and centered text.

footer {
  background-color: #1c204b; /* navy */
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  font-size: var(--fs-preset-6);
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Make the Footer Fixed 

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
Enter fullscreen mode Exit fullscreen mode

🧭 Step-by-Step Explanation

position: fixed; --> This takes the footer out of the normal document flow.
It doesn’t move when you scroll (unlike position: absolute).

🧱 Think of it as being "pinned" to the browser window rather than sitting in the page layout.

bottom: 0; right: 0; left: 0; --> These three properties tell the browser where to anchor the fixed element.

Here's a schematic diagram illustrating the same.
+-------------------------------------------+
| |
| (page content) |
| Content fills the space above the |
| footer, and if short, footer sticks |
| to the bottom of the viewport. |
| |
|-------------------------------------------| ← footer area
| Sticky Footer here |
+-------------------------------------------+
(viewport bottom edge)

Top comments (0)