Extra Space Appearing at the Bottom of WordPress Site

3 Views

I’m a new poster to this site. I’ve used it as a research resource for several years, but this is the first time I’ve been stumped to the point of needing to reach out to the community at large.

I’m currently in the process of finalizing a redesign of a site for a client. It uses a heavily customized version of WooThemes Canvas as the framework, and lives at http://dev.victorybeer.com. I added a few extra items of markup to the footer.php file in order to display some dynamic data at the bottom along with the standard footer fare. The problem that you can see is the extra space that shows up below the footer (where the blue background can be visible). The site should simply end with the red “footercontainer” DIV.

Read More

I’ve double- and triple-checked my markup and css (using FireBug) to make sure that everything is valid and that there was no margin or padding being applied from internal elements that could be pushing the bottom down, but I see absolutely nothing that indicates it would create this. Short of some strange PHP issue, I can’t fathom why it would be happening. When I remove the bottom navigation and the footercontainer DIV, the site terminates properly (just below the “European Tradition…” tagline).

I submitted a HelpDesk ticket to WooThemes and the answer I got was to hard-code a height of 300px to the footercontainer DIV in order to push it down to cover the space. As a responsive site this didn’t sit well with me, and seemed more to be covering the symptom rather than treating the cause. When I reopened the ticket and indicated that the workaround wasn’t sufficient, the response befuddled me:

The reason it was creating a gap was because the footer was nor
reaching all the way to the bottom and a height to the footer fixed
that up. I’ve also test the solution on mobile view as well and it
worked.

As you know all the elements on the page are affected by one another
and the gap at the bottom is as a result of that. I have worked on my
sites where the elements do not render exactly as I need it to and add
css such as this fixed it up.

More than this I honestly don’t know.

Huh? What I want to know is why the footer isn’t reaching all the way to the bottom, not how to mask the fact that it doesn’t.

Can anyone out there help with this? I would be most grateful. The site is slated to go live on 3/3, so your collective assistance is appreciated.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. I’ve had this problem before as well. There are a couple ways that I have fixed it, though it may not be the best method.

    When there is not enough “height” content, then a simple way to fix it is to fix a height on your custom.css (Line 460).

    I’ve tried it out and it seems to work to fill in that extra space. 

    #footercontainer {
background-image: url("images/vbc_bkg_wfh.png"), url("images/vbc_bkg_footer.png");
background-position: 80% 70px, left top;
background-repeat: no-repeat, repeat;
border-top: 1px solid #270101;
height: 280px;

    I’ve changed the height to 280px and it seems to always work since your pages all have the same height of gap missing. If you’re looking for something more in depth, I think you’d have to examine all of your html as well as CSS for this. This fix has worked for me in the past.