CODEWITHSUNDEEP
htmlcss
Sandokan
Sandokan

Reputation: 1105

How to stick the footer to bottom?

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?

Upvotes: 2

Views: 1096

Answers (1)

David Wilkinson
David Wilkinson

Reputation: 5118

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>

Upvotes: 2

Related Questions