It took me a few days to figure this one out. I’d like to share my new-found wisdom with you, in the hopes that you don’t make the same mistakes I did. In this article I’m going to show you how to force your footer to stay at the bottom of the page, no matter how little content you have on the page. This technique will apply to websites generally-speaking, but is intended more specifically for users of a Zen sub-theme in Drupal. I’m using Drupal 7, which might matter.
First, Read This
Before I talk about the specifics of doing this in Drupal 7 and in Zen, read this excellent article. In this article you’ll learn what you need to know about forcing footers to the bottom of the page using CSS in websites generally. You’re basically going to be customizing the ideas found here.
Integrating this with Zen in Drupal 7
The main problem with using these techniques with Drupal, of course, is that you can’t just create those three divisions of content, supported by a #container <div>. Most likely you’re using a theme template someone else created; in my case a Zen sub-theme.
As it turns out, it’s really not so complicated to implement these ideas with an extant theme. You just to have to massage what’s already there with the ideas in the article I just referenced.
Edit page.tpl.php
The first thing to do is edit your page.tpl.php file. Copy the file from the /templates folder in the Zen theme and place it in the root of your sub-theme folder. Then, edit it. You’ll notice it already has a container id of sorts (<div id=”page”>). So no need to add another container! You’ll also notice a <header> tag that was can use (.header however instead of#header, as its a class, not an ID, but that’s fine). Moreover, we’ll already got a body section called (<div id=”main”>). The only area missing is the footer.
What I did was customize my footer area of this page by taking this code:
<?php print render($page[‘footer’]); ?>
And placing it WITHIN a new DIV I set as the following:
<div id=”footer” class=”clear”>
So the whole code in the tpl.php is as follows (for the footer):
<div id=”footer” class=”clear”>
<?php print render($page[‘footer’]); ?>
</div>
Just place ALL THAT right before the final </div> on that page.
Edit SASS (and/or CSS)
Next, you’ll need to edit your CSS. I use the SASS (.scss) files that are part of the Zen sub-theme – and use Compass to compile them. However, if you haven’t yet made this leap, you can just make your changes directly in the CSS files in the /css folder in your sub-theme.
I’ve split my SASS/CSS into multiple files based on function, but you could just as easily just put all the following code into your main stylesheet in your sub-theme (styles.css).
First, do just as the article described: set the html and body styles as advertised. And, since #page is your #containerreplacement, just put the following code in there:
#page {
min-height: 100%;
position: relative;
}
Make sure .header has the settings described for #header in the article (just replace #header with .header). Also, make sure to set padding-bottom on your #main ID (this takes the place of the #body ID), like so:
#main {
padding-bottom: 45px;
}
Next, and this is a troublesome part. You’ll need to make sure to fix the CSS for both your #footer ID as well as the block contained within it. Go ahead and give all the settings to your #footer ID as is done in the article. But also make sure to give your contained block (in my case #block-block-10) the following CSS (especially important if you have, for example, a <p> tag in your footer:
#block-block-10 {
margin: 0px;
padding: 0px;
}
#block-block-10 p {
margin-bottom: 0px;
margin-top: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
Finally, make sure your footer is set correctly to be displayed in your Zen sub-theme /layouts folder. In the _responsive.scss (or .css) file (assuming you’re using the responsive layout), make sure your footer is represented, like so, as the last item in the document:
#footer {
@include zen-clear();
@include zen-grid-item(17, 1);
}
I use a 17 column layout in this example…but change it based on your column number set with $zen-column-count. Just make sure it includes the total number of columns you’ve set in that variable. You may have to set this for all the different possibilities of screen sizes in that document (since it accounts for different layouts, hence the name ‘responsive.scss’).
Also make sure that #footer, #content, and #header are all set as follows (put this at the top of the responsive.scss file if it’s not already there – I’ve lumped the @includes into the same nested container here, but you’ll probably have them separated, and that’s fine.
#header,
#content,
#footer {
@include zen-grid-item-base();
@include zen-grid-container();
}
It perhaps goes without saying that none of this is possible unless you also make sure to have a block set to be in the footer region in your Drupal site (admin > structure > blocks).
That’s it. Your footer should now stay at the bottom of the page.