Footer not staying at the bottom in Firefox

Question

So I have a footer that stays at the bottom but isn't fixed, however it doesn't work in Firefox only.

.Links {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #E48A4B;
  text-align: center;
  text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<footer>
  <div class="Links">
    <a href="https://codepen.io/mexO/">
      <i class="fa fa-codepen fa-2x" aria-hidden="true"></i>

    </a>
    <a href="https://jsfiddle.net/user/mexO/fiddles/">
      <i class="fa fa-jsfiddle fa-2x" aria-hidden="true"></i>
    </a>
    <a href="https://twitter.com/MaxJordanNet">
      <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
    </a>
    <a href="https://github.com/mexOcode">
      <i class="fa fa-github fa-2x" aria-hidden="true"></i>
    </a>
    <a href="updates.html">
      <i class="updatesButton fa fa-plus-circle fa-2x" aria-hidden="true"></i>
    </a>


  </div>
</footer>

Now it works if i change absolute to fixed in the CSS however that make it always on the page, which isn't what i want. It works in all other browsers i have tested apart from FireFox.

Also i have already tried using the only solution i could find, clear: both; but that didn't work either.

EDIT: My poor wording is confusing people.

Go to maxjordan.net on chrome to see for youself, but i want it to look like this

https://gyazo.com/b81099b69c43367769a46b321b327440 (Ignore the broken footer on the home page, just know thats the position i want it.)

However on firefox it looks like this:

https://gyazo.com/58a4e7a24a8e365aba2918d2aa4c8525

This works fine in firefox http://codepen.io/anon/pen/dNzYzb please include all of your code and a replicable example of the problem. http://stackoverflow.com/help/mcve — Michael Coker, Jan 24 '17 at 19:40
try making the footer postiong relative by putting this style on the footer- — yogihosting, Jan 24 '17 at 19:43
Do not just point people to source code on another website. It's fine to include a link but post your code here. If the source code on the link changes, your question becomes obsolete. — chazsolo, Jan 24 '17 at 19:57
Theres like 4k lines of source code, im not sure how i would post it all. — user7432478, Jan 24 '17 at 20:03

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

EDIT:

I believe what you're looking for is here:

Footer at bottom of page or content, whichever is lower

If you want the footer to keep pinned to the bottom - even with content scrolling - change the position from absolute to fixed.

JSFiddle here: https://jsfiddle.net/iamjpg/rz2ddzx6/

.Links {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #E48A4B;
  text-align: center;
  text-decoration: none;
}

edited May 23 '17 at 11:45

Community

1
1

answered Jan 24 '17 at 19:45

iamjpg

7,078
1
16
18

Thats what i dont want thought, i want it to be at the bottom of the page, even if the content doesnt fill the page. – user7432478 Jan 24 '17 at 19:46
I'm guessing that what you want is it to be at the bottom unless the content exceeds the window? – iamjpg Jan 24 '17 at 19:47
I want it to be at the bottom, all the time. – user7432478 Jan 24 '17 at 19:50
Go to maxjordan.net I want it to be like that (On chrome) but if you try it on firefox it doesnt work. – user7432478 Jan 24 '17 at 19:50
Check this other stackoverflow awnser: http://stackoverflow.com/questions/12239166/footer-at-bottom-of-page-or-content-whichever-is-lower – iamjpg Jan 24 '17 at 19:51
this is a sticky footer, what about letting footer be at the bottom – Tudor Jul 12 '17 at 13:11

score 0 · Answer 2 · answered Jan 24 '17 at 19:48

0

Keep the position fixed instead of absolute.

answered Jan 24 '17 at 19:48

Akmal Arzhang

357
4
14

score 0 · Answer 3 · answered Jan 24 '17 at 19:54

0

remove position absolute and just put footer tag bottom, in the end of html

answered Jan 24 '17 at 19:54

Martian

99
1
11

Footer not staying at the bottom in Firefox

3 Answers3