Footer position issue - CSS

Question

Can anyone help me why the footer is not going to bottom of page?

http://dev.unwaveringmedia.com/billy/

You can see the space after black footer. I don't need that and want the footer be exactly positioned on the bottom of page?

Answer 1

You have many options to deal with this issue.

Option 1

.footer-container{
    position:absolute;
    bottom:0;
}

Option 2

Use a sticky footer

Option 3

html, body {
      padding: 0;
      margin: 0;
      height: 100%;
}

#wrapper {
      min-height: 100%;
      position:relative;
}

#content {
      padding-bottom: 75px;   /* This value is the height of your footer */
}

.footer-container {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 75px;  /* This value is the height of your footer */
}

Answer 2

You just need some content before the footer (or try one of the other options listed above).

I did this and it fixed it:

1. Right before the <div class="footer-container">

2. Enter this html: <div style="min-height:500px;">test</div>

That makes it work normally. So that should show you the problem you have. Either give it a minimum height, or just add your content in there (some lorem ipsem, etc.) or find another way to fix it.

Answer 3

try this

.footer-container {
    bottom: 0;
    margin: 0 auto;
    position: absolute;
    width: 100%;
}

Answer 4

You should give .footer-container to bottom:0; and position:absolute to fix footer at bottom.

.footer-container {
    bottom: 0;
    position: absolute;
}