Get your foot(er) on the ground!

by zemion

When setting up this blog, I ran into a simple but common problem with the original theme: the footer was floating "mid-air" when the content was shorter than the page height.

The desired solution should not nail the footer to the bottom (fixing it, thus alway showing it independently of scrolling). Also, I was looking (for the n-th time) a CSS-only solution (well, including the necessary HTML sctructure).

To understand the problem here's a picture of how the page looked like before the footer fix:

Website footer before applying fix, hovering in the middle of the page

Fortunately, the solution was not too difficult to find. A quick google led me to this answer on stackoverflow and the linked jsFiddle. Adapting this to the theme was not too difficult. Add a

<div id="wrapper">

at the beginning and a

<div id="push"></div>

at the end of the header.php, closing the #wrapper in the footer.php:


For the css, using a height of 9em, put

body, html { height: 100%; }
div#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -9em;
div#push, footer { height: 9em; }

And that's about it. Explanation: The wrapper leaves a negative margin of 9 em, "pulling up" the footer that is filling the gap. Now, when the content is shorter than the page height, the height kicks in, pushing down the footer.

When the content get's longe, the #push element takes care of the spacing at the bottom: Usually the content would flow "behind" the footer, but as the final element is an empty block of exactely the same height, this can't happen.

Result: Website footer after applying fix

What's left to do is fixing the size when the page is viewed on mobile devices (I just say breakpoints) ... Done.

Function get_magic_quotes_gpc() is deprecated
The error has been logged in /anchor/errors.log
Uncaught Exception

Uncaught Exception

Function get_magic_quotes_gpc() is deprecated


system/boot.php on line 34


#0 [internal function]: System\error::shutdown()
#1 {main}