Socket Size & color

Unfortunately there’s (currently) no real fix for this issue. The content container height depends on the content and if there isn’t enough content the container height won’t cover the viewport height – in this case the content container ends before the bottom of the screen and the body background is visible at the bottom. I’d suggest to use the same color for the socket and the body/html background – then the user won’t notice that the body/html background is different and the user will just notice that the socket height varies from page to page.

I found some jquery scripts – eg http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/ or http://www.egstudio.biz/sticky-footer-with-jquery/ which will add a margin to the footer div if the content container height doesn’t exceed the viewport but I feel it’s very buggy and doesn’t always work as expected. In addition it will maybe break the responsive layout (didn’t test this though)

However if you want to try it add following code to the bottom of enfold/js/avia.js:

jQuery(document).ready(function() {

var footer = jQuery("#footer");

var pos = footer.position();

var height = jQuery(window).height();

height = height - pos.top;

height = height - footer.height();

if (height > 0) {

footer.css({'margin-top' : height+'px'});

}

});