1. If the content is shorter than the browser resolution, the "body" will fill the page until the footer is at bottom of the screen with no blank whitespaces after or before it.

2. No matter what the browser resolution is there will be no whitespaces after the footer, so im trying to refrain from code that will use a determined "px" number.

3. I want the footer to be displayed in a traditional 'bottom' of the page way and NOT a sticky footer that always remains at the bottom of the screen no matter how far you scroll, as seen here

As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS and an answer that acknowledges a Wordpress specific fix. I have tried several solutions but to no avail. I have been suggested to use Ryan Fiat's Sticky Footer solution but I'm unsure of how I would incorporate that into my Wordpress as it uses PHP and I mainly edit with custom CSS.

Heres a Fiddle of my footer PHP.

Q. Please provide me with a clear and direct solution for Wordpress that will make sure there are no whitespaces below the footers on my site when the content is shorter than the browser.

You can find an example of the whitespaces on my website here

Solutions i've tried:

1.
Code:
#footer {overflow: hidden;}
in the custom CSS didn't work.

2. Putting
Code:
html, body, parentDiv, childDiv, section, footer { height : 100%; }
in my custom css but that didn't work.

3.
Code:
#copyright { padding-bottom: 20px;}
"#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.

4. Solution like this are not Wordpress specific.

5. "div-wrapper, body" solutions like Ryan Fiat's seem to have positive responses but again I cant find a Wordpress specific one.

Answers from those that have experience with Wordpress are greatly appreciated.