Hi, I’ve seen questions about the footer riding up if the main page does not contain enough content. You were unable to offer a solution.
Basically, the problem is that if the content of the page is too little then the footer rises up so that it is directly underneath the content. This is not optimal. If you are not seeing it, try zooming the browser page out.
To fix it, try this:
/* pin footer to bottom, and ensure background is white */ html { position: relative; min-height: 100%; } body { margin: 0 0 45px; /* change this 45px height to match your desired footer height */ } .layout-full #colophon, #colophon { position: absolute; left: 0; bottom: 0; height: 45px; /* change this 45px height to match your desired footer height */ right: 0; } body.layout-full { background-color: #ffffff !important; /* change the background color to match the page background */ }
You’re welcome. :)
Tit-for-tat: do you want to have a try at my post about column heights? It’s pretty important, and I’m OK with a custom solution.
Oh, I should add that this will look wrong if you are logged in as admin and can see the admin menu at the top of the page, but will look right otherwise. You can test it in an incognito window to verify.
Curious to know if anyone else has tested this, or if any of the admins see any issues with this…