Search code examples
javascriptjquerycssfooter

Nearly Static Gap between footer div and body tag


I know there are lots of "Stick my footer to the floor" type of questions all over the internet, but this issue I found seems a bit different.

Here's the issue, I'm noticing about a 29px gap between the bottom of the footer and the <body> tag. You can see this at http://thinkfvm.serena.fvm.sc/.

No matter what browser I'm looking at the gap is always around 29px. The design is responsive and when you change the width of the screen the gap will usually be between 28.5 and 29.5 pixels tall.

I'm computing the gap size with the following command in the inspector console:

$('body').height() - jQuery('#footer').offset().top - jQuery('#footer').height();

Although I've tested in multiple browsers I'm using Chrome Inspector to try to figure out what's going on. Looking at the computed styles I see the #footer div has no margin or padding, likewise with the body and html tags.

If you look at the page you can see that the content is long enough that this isn't a "sticky" footer issue, it's something else.

I'm not too worried about getting rid of the gap as it's not very noticeable, but for my own peace of mind I want to make sure I at least know WHAT is causing the gap.

Thanks


Solution

  • Potential culprit is that you have quite a few pixel/js/iframe trackers in the footer - make sure they don't interfere with your design. Right now there is at least 1 iframe and 1 visible 1x1 pixel.