Home Is it possible to keep the footer always at the bottom without adding flex styles to the body?

Questions

Is it possible to keep the footer always at the bottom without adding flex styles to the body?

January 22, 2024

I’ve attempted to position my footer at the bottom of the page without resorting to adding flexbox styles to the body, similar to this question. I’d like to achieve this without applying the fixed style directly to the footer and applying flexbox style to the body tag. Is this possible? Any insights or solutions would be greatly appreciated. Thanks in advance!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body style="height: 1000vh">
    <header style="background-color: red;height: 30vh;"></header>
    <main style="background-color: green;height: 30vh;"></main>
    <footer style="background-color: blue;height: 30vh;"></footer>
  </body>
</html>

expected result

>Solution :

You just set body to position: relative, then the footer, can be set to position: abolute, then you can use bottom, left, right to zero, this will ensure the footer is positioned always at the bottom of the body.

Also to ensure the main content is not intersecting the footer, you can add the margin-bottom: 20vh to the main tag to ensure that there is no overlap!

CSS Positioning

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body style="height: 1000vh;position: relative;">
    <header style="background-color: red;height: 30vh;"></header>
    <main style="background-color: green;height: 30vh;"></main>
    <footer style="background-color: blue;height: 30vh;position: absolute;bottom:0px;left: 0;
    right: 0;"></footer>
  </body>
</html>