I have basic coding experience. In my Wordpress install, some of my pages have a blank whitespace under the footer because there is not enough content to push it to the bottom of the monitor at higher resolutions. The problem is persistent on chrome, Firefox, IE etc. I would like to fix this so that:
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.
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.
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 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:
#footer {overflow: hidden;} in the custom CSS didn't work.
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my custom css but that didn't work.
#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.
"div-wrapper, body" solutions like Ryan Fiat's seem to have positive responses but again I cant find a Wordpress specific one.
Answer from those that have experience with Wordpress are greatly appreciated.
I don't think there's a good pure CSS fix that isn't hacky in some way without changing how your page works (sticky footer or something).
Here are two options:
Use javascript to determine the height of the window, subtract the height of the footer, and force the content section to have a minimum of that height. You would also need to run this same function when the window is resized. This isn't a great solution.
What I would recommend is to just add the CSS rule body {background: #222} to make the body the same background as the footer. This way, if they content doesn't fill the whole window it just looks like the footer fills the empty space instead of white.