How Can I Move The Footer To The Bottom Of The Page If The Content Height Is Short?

Developers Frontend
1

Hi,



in some of my pages the height of the main content is too “short” which means that the footer is not touching the bottom of the page.



I've tried a few things in my CSS file, e.g.



.tygh-content {
padding-bottom: 95px;
}




or



.tygh-footer {
padding-bottom: 95px;
}




but these seems to move the footer down even for those pages where it's placed correctly.

I only want it to move for those pages that are affected.



Can anyone please help?



Thanks.

2

'Out of the box' the default layout works fine with the footer at the bottom of the screen, regardless how much content is shown by the 'Main Content' block. I can only assume that other template and/or CSS changes you have made have caused the issue. Without seeing the problem (i.e. posting a link to the page(s)), it's difficult to ascertain what has gone wrong.



You may want to consider setting a “min-height” attribute for the “main-content-grid” class selector which should force the footer down, however, you would be far better off finding the root cause of the problem on your site, as you may find some browsers will not render 'min-height' effectively, in particular the dinosaur-era IE6 and below. Your judgement call on whether or not you want to care about customers using these ancient browsers, but can anybody in business afford to throw away 0.X% of their online business?

3

Hi,



I played around with “min-height” and I think it works.



Thanks for your help.