Footer Position Fixed overlapping page content

Question

I am having issues trying to make my footer at the bottom, but it overlaps the content on the page if there are too much content.

this is my footer css

footer {
position:fixed;
bottom: 0;
}

this is how the page looks without any content

this is how the page looks with overlap content with the footer

Possible duplicate of [Sticky footer with flexbox](https://stackoverflow.com/questions/50429737/sticky-footer-with-flexbox) — Grzegorz T., Jul 28 '19 at 21:01

score 1 · Accepted Answer · answered Jul 28 '19 at 20:58

You could structure your HTML as follows:

<body>
  <header class="Header"></header>
  <main class="Main"></main>
  <footer class="Footer"></footer>
</body>

Then, use flex box to render the footer at the bottom of your page using the following code:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

footer,
header {
  flex: 0;
}

See a fully working demo code below and learn more about flex box here:

header::after,
main::after,
footer::after {
  content: attr(class);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
}

footer,
header {
  flex: 0;
}

<header class="Header"></header>
<main class="Main"></main>
<footer class="Footer"></footer>

Footer Position Fixed overlapping page content

1 Answers1