I took to commenting out nearly the entire site, slowly checking which bit of faulty css was causing this mess – and ultimately, it wasn’t even the CSS that was causing the problem.
If you’re stuck with a mysterious blank space at the bottom of your site, here are 3 steps to fixing it, forever.
Use a CSS reset like the one attached here, or grab yourself the HTML5 Boilerplate, which offers an excellent CSS reset. In many cases, using a reset CSS can solve most of your CSS related problems, it also gives you a solid base to work from, and troubleshoot from.
Avoid using height: 100{257ff5eee955dcce42a38bc16956f0ac3408a79bb49aa45fe4d698fd01d3deb6} on your HTML or Body element. Double, and triple check that yourorelements do not have bottom padding or margin which could be causing this white space. This also applies to any wrapping elements, or your main table element if your site is using a tabled layout. If worse comes to worse, use this declaration:
* { border: 1px solid red; }
Which will select every element, and give it a red border. Inspect your html page, and see if you can decipher which element may be causing the extra space.
This is what caught me, and wasted about 2 hours of my time tracking it down. After using a PHP include for my footer, I had a line of white space after my closing PHP tag. This extra line caused the page to render with a white space at the bottom of my page. Removing it solved my problem!
