CSS Flexbox / Fixing footer on bottom of the page in all cases

Question

I'm getting issue to get my footer at bottom of page in all cases, or it's disappearing when scrolling up or down, or it's just showing at the top of the page... Tried to find out on here but impossible for me to get it..

I do apologize if this post is a duplicate from an existing one..

body {
  display: flex;
  flex-direction: column;
}

footer {
  background-color: rgba(255, 255, 255, 0.9);
  height: 25px;
  order: 4;
  border-top: 1px black solid;
  margin-top: auto;
  text-align: center;
}

<footer>
  <span>Text of my footer</span>
</footer>

Not sure if Grid might help on such situation and make life easier?

And thank you for any answer! :) Rgds, Erick

score 0 · Answer 1 · answered Mar 28 '21 at 19:45

0

You can use position: fixed and set bottom: 0px

body {
  display: flex;
  flex-direction: column;
}

footer {
  background-color: rgba(255, 255, 255, 0.9);
  height: 25px;
  order: 4;
  border-top: 1px black solid;
  margin-top: auto;
  text-align: center;
  position: fixed;
  bottom: 0px;
}

<footer>
  <span>Text of my footer</span>
</footer>

You might need to add width: 100%

answered Mar 28 '21 at 19:45

Rojo

2,749
1
13
34

That's cool! Thanks, is this the best way to handle such thing? I still have an issue, the footer is not spreading in the entiere height, just on 1/5.. how can I do for the footer to show on 100% of height of the screen? – Erick Caron Mar 28 '21 at 19:50
width: 100% answers! :D – Erick Caron Mar 28 '21 at 19:52

Manas Khandelwal · Answer 2 · 2021-03-28T19:52:41.247

Add position: fixed; and bottom: 0;.

position fixed set the position to stays in the same place even if the page is scrolled.

body {
  display: flex;
  flex-direction: column;
}

footer {
  background-color: rgba(255, 255, 255, 0.9);
  height: 25px;
  order: 4;
  border-top: 1px black solid;
  margin-top: auto;
  text-align: center;
  position: fixed;
  bottom: 0;
}

<footer>
  <span>Text of my footer</span>
</footer>

CSS Flexbox / Fixing footer on bottom of the page in all cases

2 Answers2