Getting rid of white space at the bottom of the page of the website when at test server

Question

It seems that there's no similar problem as mine that I can find in the Internet. So my problem is a huge white space at the bottom of the website that I am currently developing. It only appears after I uploaded it to the server that I have but it isn't when I test it in my WAMP server. What could be causing it? I double checked my CSS and can't find the one that I think causes the problem.

The following image shows the bottom of the page when it's tested in localhost:

http://i59.tinypic.com/rtnqqr.png

This is the image that shows what the bottom of the page looks like after being uploaded to a test server:

http://i59.tinypic.com/sg7las.png

In case you need the exact website:

http://www.bagongbayani.url.ph

Notice that there's already a white space at the bottom of the page. What do you think causes that to happen?

I am using Unsemantic Responsive Grid Framework for that site.

NOTE: Don't resize the screen to a smaller one. I am not yet finished with the design of the mobile view.

Answer 1

The white space appears at the bottom of the layout when the page contents are not as tall as the viewport. Thus you get the body background showing at the bottom. There are fancy fixes for this, but really, the easiest and most practical solution (in my view) is to apply the footer background color (in this case, an image) to the body itself:

body {background-image: url(../images/zwartevilt.png);}