How to put the Footer at the bottom of the screen using only CSS?

Keeping the footer at the bottom of a web page seems trivial… until it isn't. It has surely happened to you: you have little content and the footer ends up floating in the middle of the screen, or you fix that and, when the content grows, the footer overlaps and ruins the entire layout.

After trying several ways to solve it, I stuck with a simple and reliable approach. It's not the most "exotic," but it is one of the ones that causes the fewest problems in real projects. In this article, I'm going to show you the best way to put the footer at the bottom using CSS, when to use each method, and what errors to avoid.

The real problem: little content vs. a lot of content

Before writing a single line of CSS, it is worth being clear about the scenario:

• Little content → the footer should stay at the bottom of the viewport.
• A lot of content → the footer must descend naturally, without covering anything.
• Responsive → it must work the same on mobile and desktop.
• No JavaScript → CSS only.

The common mistake is trying to resolve all cases with position: fixed. It works… until it doesn't.

The best solution today: footer at the bottom with Flexbox

If I had to choose just one recommended method, it would be this one. Flexbox solves the problem cleanly, without magic numbers and with excellent browser support.

Basic HTML structure

html, body {
 margin: 0;
 padding: 0;
}
body {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}
main {
 flex: 1;
}
footer {
 background: #222;
 color: #fff;
 padding: 20px;
}

Nothing unusual: semantic and organized HTML.

CSS with Flexbox

<section>
<h1>Contenido</h1>
</section>
<footer>
  <h1>Footer</h1>
</footer>

Why does using Flexbox work so well in modern development?

• min-height: 100vh ensures the layout occupies the entire screen.
• flex-direction: column stacks the content vertically.
• main { flex: 1 } pushes the footer down when there is little content.
• If the content grows, the footer moves down without overlapping.

This is the method I use most today because it simply works, even when content changes dynamically.

Classic alternative: min-height + footer compensation

There are many ways to anchor to the bottom of the screen (or the page, rather); in this post, we will see one of them. Personally, this is one of the ways I like most due to its simplicity and, therefore, few implementation problems; let's see.

Before using Flexbox, this was one of my favorite solutions because of its simplicity. In fact, I used it for a long time because it is easy to understand and does not require complex structures.

In the HTML, there isn't much to define or say; basically, we need at least the body of the document (represented by the section tag) and a footer (represented by the footer tag), which is what we are going to anchor to the bottom of the screen; the following code was developed with this in mind:

<section><h1>Content</h1></section><footer> <h1>Footer</h1></footer>

Once again, we define our CSS however we want; here we only show the most important sections. There are two points worth noting from the previous CSS:

• The margin-bottom property of the document body (section) must be of the same dimensions as the footer height but negative; in other words: section.margin-bottom = footer.height*-1
• The min-height property of the document body (section) must be set to 100% so that the minimum height occupies the entire screen.

html, body {
  height: 100%;
  margin: 0;
}
body {
  background-color: #0BF;
}
section {
  min-height: 100%;
  /* igual al largo del footer */
  margin-bottom: -150px;
}
footer {
  height: 150px;
  background-color: #08B;
}

Final Result

What you should keep in mind
The negative margin-bottom must be exactly equal to the footer height.

• If you change the size of the footer, you must update both values.
• It works well, but it is not as flexible as Flexbox.
   

In simple projects or legacy layouts, it remains a perfectly valid option.

When to use position: fixed (and when not to)?

A footer with position: fixed stays visible all the time. This can be useful, but it is not a general solution.

footer {
 position: fixed;
 bottom: 0;
 width: 100%;
}
main {
 padding-bottom: 80px; /* altura del footer */
}

Use it only if:

• The footer contains important actions.
• You want it to always be visible.
• You accept that it occupies constant screen space.

Avoid it if:

• The footer is only informative.
• You don't want to cover content.
• You are looking for a "smart" solution.

Common mistakes when putting the footer at the bottom

These are flaws that appear time and again:

• Using position: fixed without compensating for the content.
• Setting rigid heights in pixels.
• Not testing on mobile.
• Relying only on height: 100% without min-height.
• Mixing several methods at once.

Most problems disappear when you choose a single clear approach.

Footer at the bottom and responsive: important details

A well-positioned footer must also adapt:

• Use relative units (em, rem, %, vh).
• Avoid unnecessary fixed heights.
• Adjust padding and typography on mobiles.

Quick example:

@media (max-width: 600px) {
 footer {
   padding: 1em;
   font-size: 0.9rem;
 }
}

This prevents overflows and improves the experience on small screens.

And CSS Grid?

CSS Grid can also solve this problem, but for this case, it is usually more complex than necessary. If you already use Grid in your entire layout, go ahead. If not, Flexbox is more direct.

FAQs

• Why doesn't my footer stay at the bottom?
  • Because the main container does not occupy the full viewport height or you are not using a flexible system (Flexbox/Grid).
• What is the best way to put the footer at the bottom in CSS?
  • Flexbox with min-height: 100vh and flex: 1 on the main content.
• How to prevent the footer from overlapping?
  • Do not use position: fixed without compensating for the space, or use Flexbox.
• Does this work on mobiles?
  • Yes, especially Flexbox. It is fully responsive.

Conclusion

If you are looking for how to put the footer at the bottom in CSS, my recommendation is clear:

• ✅ Flexbox as the main solution.
• Classic method with min-height as an alternative.
• position: fixed only in very specific cases.

After trying several ways, the key is not to complicate the layout more than necessary. A stable, well-placed footer without weird hacks improves both the user experience and code maintainability.