How to fix the page footer in the HTML

In this article, we’ll learn how to fix the page footer in the HTML so that it’s at the bottom of the screen instead of following the content.

Hey you programmer, okay? Let’s learn something new!

Watch this content on YouTube:

You’ve probably run into this problem when creating a webpage.

If it doesn’t have much content, the footer is where the content ends.

And not in its correct place, which is at the bottom of the page.

So let’s solve this problem, see the following example:

<!DOCTYPE html>
<html>
 <head>
  <title>Como fixar rodape na pagina capa</title>
  <meta charset="utf-8">
 </head>
 <body>
  <h1>Minha página</h1>
  <p>Meu conteúdo</p>
  <p>Meu conteúdo</p>
  <p>Meu conteúdo</p>
  <footer>
    Rodapé da página
  </footer>
 </body>
</html>

This will look like this in the browser:

This is the problem, we have a page with little content and the footer is in the wrong part

Now let’s go to the CSS that solves this case:

html, body {
 min-height: 100%;
}

body {
 padding: 0;
 margin: 0;
}

footer {
 position: absolute;
 bottom: 0;
 background-color: blue;
 color: #FFF;
 width: 100%;
 height: 100px; 
 text-align: center;
 line-height: 100px;
}

Now see the result in the browser, with the problem solved:

Some important considerations: we have to add a relative position and height 100% to the body and to the html so that the footer can reach the end through the total height of the page

And of course, as “he” will have absolute position, “he” needs to have a father to be relative, which will be the body

| Do you want to specialize in Web Development? Check out our course catalogue.

This is the main concept, the rest is a matter of layout.

We removed all the margins and padding from the body, as if it were a reset in order to occupy 100% of the width with the footer

And in the footer, taking the absolute position to be positioned at the bottom of the page with the bottom 0, the rest is just his style to stand out from the other elements

And so our problem with the fixed footer is solved.

Conclusion

In this article we learned how to fix the page footer in HTML, using a little CSS

The idea is that the body and HTML are 100% tall, even though they don’t have elements that represent this totality.

So that at this 100% height the footer adapts to the bottom of the screen with an absolute position, and of course when there was more content it will always be the last element

Want to learn more about CSS? Click here!