FireFox send footer to bottom

Question

My footer will not stick to the bottom of the page in the latest Firefox, while it works in Chrome and IE11. From what I can tell the min-height:100% for the wrapper has no effect in Firefox.

HTML

<div id = "wrapper">
  <div id = "content">
  </div>
  <div id = "push">
  </div>
</div>
<div id = "footer"></div>

CSS

#wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -235px;
}
#push{
    height:235px;
}

    #footer{
    position:relative;
    height:235px;
    width:100%;
}

Does `#wrapper` div located directly into `` as a child element? — Hashem Qolami, Aug 16 '14 at 21:31
It doesn't work on any browser for me Safari, Chrome or FF... Why not use `bottom:0;` method? — imbondbaby, Aug 16 '14 at 21:41

misterManSam · Answer 1 · 2014-08-16T21:48:25.197

Let's simplify what you have a little.

Your #push can be replaced with the pseudo element :after on your wrapper.
Remove the height on the wrap and avoid !important.
html,body needs to have a height of 100% in order for other elements to have percentage heights

Have an example!

HTML

<div class="wrap">
   <!-- main content -->
</div>    
<footer class="footer"></footer>

CSS

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
.wrap {
  min-height: 100%;
  margin-bottom: -235px; 
}
.wrap:after {
  content: "";
  display: block;
}
.footer, .wrap:after {
  height: 235px; 
}
.footer {
  background: #F00;
}

Tested and working IE8+, should also work in IE6/7, but can't remember :) — misterManSam, Aug 16 '14 at 21:58

score 1 · Accepted Answer · edited May 23 '17 at 12:20

It's hard to say by the posted code but according to CSS level 2 spec:

10.7 Minimum and maximum heights: 'min-height' and 'max-height'

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').

Hence you should make sure that the parent of #wrapper has an explicit height. If the #wrapper is located in <body>, try specifying height: 100% on <body> and <html> elements as well:

html, body {
    height: 100%;
}

Because a percentage value for height property is relative to the height of the generated box's containing block as well, in this case the <html>. Otherwise the value computes to auto.

In addition, using height: auto !important; and height: 100%; together doesn't make sense and they're pointless; So it's better to remove them.

#wrapper{
    min-height: 100%;
    margin: 0 auto -235px;
}

Finally if it didn't work, you could give the following approach a try:

Position footer at bottom of page having fixed header

Thanks - adding height:100% to the body was the answer. – user3822370 Aug 16 '14 at 21:59 — user3822370, Aug 16 '14 at 21:59

score 0 · Answer 3 · answered Aug 16 '14 at 21:44

0

If you are trying to have your your footer stick to the bottom, use:

#footer{
   position:fixed;
   bottom:0;
   height:235px;
   width:100%;
}

I just tried it with your code and verified that it works on the latest firefox.

answered Aug 16 '14 at 21:44

NullEverything

450
2
5

I cannot use this because if the page is long it will appear on top of elements. – user3822370 Aug 16 '14 at 21:56

FireFox send footer to bottom

3 Answers3