How to stick the footer to bottom?

Question

I'm trying to keep the footer to the bottom, I did this in this way:

#footer
{
    background-color: #3A3A3A;
    border-top: 1px solid #222222;
    font-size: 11px;
    overflow: auto;
}

#footer #footer-content
{
    padding: 10px 15px;
    display: inline-block;
    float: left;
}

this is the html:

<div id="footer">
   <div id="footer-content">
      ...

now in some page the footer is fixed correctly, but in other page I've a lot of space between my controls and footer, so in few words there is a lot of space vertically. Happean that the footer instead of remain fixed to the footer go at the bottom of the controls, if I resize the window the footer return at the bottom correctly as the other page. I don't understand why, what is wrong in my css?

Check this out...the custom CSS will work without bootstrap too http://getbootstrap.com/examples/sticky-footer/ — Matthew Layton, Jan 07 '16 at 15:47
Possible duplicate of [CSS to make HTML page footer stay at bottom of the page with a minimum height](http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height) — Mic, Jan 07 '16 at 15:47
Duplicate of many posts. Search for "sticky footer" tricks, with or without JS. — Eria, Jan 07 '16 at 15:49
XD I should buy a glue for stick the footer? Which trade you suggest? :) — Sandokan, Jan 07 '16 at 15:59

score 2 · Accepted Answer · answered Jan 07 '16 at 15:49

2

Have you tried position: fixed?

Fiddle: https://jsfiddle.net/ar2smzyr/

CSS:

.footer {
  background: red;
  height: 100px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

HTML:

<div class="footer">
  Content
</div>

answered Jan 07 '16 at 15:49

David Wilkinson

5,060
1
18
32

or possibly position:absoute, depending on wat u mean – I wrestled a bear once. Jan 07 '16 at 15:52
@Pamblam True, the question was fairly broad so I explained my personal favourite way of doing it :-) You're right though - glue is the best! – David Wilkinson Jan 07 '16 at 15:53
Anyway, your solution not working I get the same result. I'll try with this: http://getbootstrap.com/examples/sticky-footer-navbar/ thanks anyway – Sandokan Jan 07 '16 at 16:01
No problem - it does work as I've used it many times, but perhaps just not with your project code? – David Wilkinson Jan 07 '16 at 16:04
Yep! I use bootstrap 3, I'm looking for a solution 'cause the situation is pretty strange. – Sandokan Jan 07 '16 at 16:05
this is the correct way to do it @Sandokan, if you look at the css on that page they're using this exact solution (except with position:absolute).. – I wrestled a bear once. Jan 07 '16 at 16:06
css from the page u linked: http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css – I wrestled a bear once. Jan 07 '16 at 16:07
http://stackoverflow.com/questions/19756997/how-to-create-a-sticky-footer-that-plays-well-with-bootstrap-3 exact my problem – Sandokan Jan 07 '16 at 16:07
1

@Sandokan ..lol and this is the *exact solution* ..don't ask ppl for help if you're going to be stubborn and refuse the solution.. – I wrestled a bear once. Jan 07 '16 at 16:08
Sorry for this, I found it just now. I vote for close the question. – Sandokan Jan 07 '16 at 16:09

How to stick the footer to bottom?

1 Answers1