How to get rid of the whitespace at the bottom?

Can someone please help me eliminate the extra whitespace at the bottom of thi开发者_开发技巧s website? http://www.vonlay.com/

This image shows what I am trying to remove: http://img691.imageshack.us/img691/8837/screenshot20110607at715.png

Here is how I have the footer setup.

html, body { height: 100%; }
body > #wrapper { height: auto; min-height: 100%; }
#footer { position: relative; height: 140px; z-index: 10; clear: both;
    margin-top: -140px; background: #700; color: #fff; }

You should add:

#footer .content p {
    margin-bottom: 0
}

I actually wrote another answer before that one that explains what's going on properly, with an alternative fix, here it is:

You should add overflow: hidden to #footer.

This will resolve the problem, which is that the margin on the p element inside <div class="copyright-notice"> is collapsing through #footer. See: collapsing margins.

If this seems unlikely to you, try adding this, just to see what happens:

#footer .content p {
    margin-bottom: 200px
}

Try increasing the height of your footer:

#footer { height: 145px; }

Try setting padding and/or margin on the bottom to zero for the footer and/or body.

Try using positioning:

#footer {
  position: absolute;
  bottom: 0;
}

in the footer class change

 height: 160px;

try....

Try this: Add a wrapper around every HTML element in your "body" element, excluding the footer, then in CSS do this:

.wrapper {
    min-height: calc(100vh -<your-footer-height>px);
}

You don't have to add any styling to the footer since it's not in the wrapper. so the content just takes the viewport height of the device screen.

put this in your section CSS

min-height: 100vh;