-4

I'm trying to get my footer to stay at the bottom of the page and I feel like I have tried everything. If a page lacks content then the footer pushes right up underneath the body. My current css for my footer is: 

width: 100%; 
height: 50px; 
border-top: 1px solid #fff;

The div before the footer is a container with this css: 

padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;

I have tried absolute positioning the footer with bottom: 0 but that doesn't give the desired result. I have tried clear: both on the footer and container with a position of relative. I have tried fixed positioning but that doesn't give the desired result either. Does anyone have any solution I could use?

Ben C
  • 107
  • 1
  • 2
  • 11

3 Answers3

2

Searched on google "fixed footer css", the first link got the solution

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
RiccardoC
  • 876
  • 5
  • 10
  • @BhojendraNepal Yeah just realized my mistake. Tnx – PeeHaa Nov 16 '15 at 11:54
  • @RiccardoC If you read the full question you would have seen that I used that and it doesn't give the result I was looking for – Ben C Nov 16 '15 at 11:55
  • You said "I tried position: fixed", but my solution work exactly as you said, and now I cannot understand what you mean with "I do not obtained the desired result" – RiccardoC Nov 16 '15 at 11:57
  • The footer is stuck to the bottom of your browser window when you scroll, I don't want that – Ben C Nov 16 '15 at 11:59
  • Sorry mate, then I really do not understand what you are looking for. You wrote "I'm trying to get my footer to stay at the bottom of the page" and now you say you don't want it to stay there. Pheraps it's my lack of english language skill, but I really cannot understand your needs – RiccardoC Nov 16 '15 at 12:03
0

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  min-height: 100%;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #ccc;
}
<body>
  
  <footer>
    
  </footer>
</body>

Check this out.

WP Learner
  • 788
  • 1
  • 13
  • 34
-2

This worked perfectly

$( function () {

var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
    $( '#footer' ).css( 'margin-top', height_diff );
}

});
Ben C
  • 107
  • 1
  • 2
  • 11