How to get footer to stay at the bottom on both desktop and mobile

Question

So when I set the footer's position:absolute;, it would stay at the bottom on mobile view; however, it will float in the middle of the page on desktop page. When I take it off, it would stay at the bottom on desktop page, and then float in the middle of the page on mobile view..

How would one would be able to correct this

whats your html and css? You kinda leave us wtih a complete blank slate. Show us your code — Dorvalla, Sep 18 '18 at 13:27
Can you provide your code as its difficult to say what is causing this. Its most likely to do with height of page. — karen, Sep 18 '18 at 13:27

score 0 · Answer 1 · answered Sep 18 '18 at 13:30

0

Give footer wrapper below css and you are done...

.foot-wrapper {
    position:fixed;
    left:0;
    bottom:0;
}

answered Sep 18 '18 at 13:30

ElusiveCoder

1,593
1
8
23

I did that and if I set the css position to fixed, it would show up on the bottom on mobile view, but in the middle of the page on desktop view for some reason. – Sarah Cha Sep 18 '18 at 14:26

score 0 · Answer 2 · answered Sep 18 '18 at 13:48

If I'm correct, you want your footer at the bottom of the whole page, or want it like a "sticky" footer (you always wanna see the footer if you are at the middle of the page).

The first solution (Footer at the bottom)

index.html

<div class="content-wrapper">
    <div class="some-content"></div>
    <footer></footer>
</div>

style.css

.content-wrapper{
  position:relative;
  padding-bottom:100px;
}
footer{
  position:absolute;
  bottom:0;
  left:0;
  /*your style after that*/
  width:100vw;
  height:100px;
}

The second solution (For sticky footer)

style.css

.content-wrapper{
  padding-bottom:100px;
}
footer{
  position:fixed;
  bottom:0;
  left:0;
  /*your style after that*/
  width:100vw;
  height:100px;
}

Hope it helps!

Thank you for your response. I actually want the footer to stay where it is, at the bottom of the page, not sticky footer. But for some reason when I set the position:fixed;, it would show up at the bottom on mobile view but in the middle of the page on desktop view. — Sarah Cha, Sep 18 '18 at 14:28

How to get footer to stay at the bottom on both desktop and mobile

2 Answers2