Footer fix

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.