CODEWITHSUNDEEP
htmlcss
cookiemonster
cookiemonster

Reputation: 368

Footer Position Fixed overlapping page content

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 when no content

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

Upvotes: 1

Views: 122

Answers (1)

Danny
Danny

Reputation: 1113

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>

Upvotes: 1

Related Questions