CSS: Fixed Footers


CSS: Fixed Footers for a Web Page

Footers are interesting. Most web sites have a footer, some, like this, with just some basic copyright information, others have menus, and more. The one thing that can be frustrating is for a short page -- one that doesn't even necessarily fill a browser screen -- the footer ends up under the last text, but not at the bottom of the browser, where you might expect it.

I did some digging around and one day stumbled across a solution that is completely style-sheet driven. It works perfectly (too date) with the only caveat being that you have to know how tall your footer is in whatever measurement you're using (pixels, etc.).

For this to work properly, there are three items you need for your Cascading Style Sheet. The first is a couple of settings for the main HTML tag for the website:

            html
            {
              /* for fixed footer */
              position: relative;
              min-height: 100%;
            }
         

The second item that you need in your style sheet is part of the body tag definition:

            body 
            {  
               font-family: Arial, Helvetica, sans-serif; 
               font-size: 19px; 
             
               /* for fixed footer */
               margin-bottom: 60px;
            }
         

The third is the definition of the footer itself. Using the one for this site, you would see the following in my style sheet:

            footer
            {
               width: 100%;
               margin-top: 30px;
               padding-top: 20px;
               height: 60px;
               text-align: center;
               background-color: green;
               color: white;
               /* for fixed footer */
               position: absolute;
               bottom: 0;
            }
         

The important things to note are that you have to use in the styles for the body tag margin-bottom setting with the same height value as in the footer definition.

The margin settings in the footer just deal with how much space you want to allot above and below the text. The other elements marked with the comment "/* for fixed footer */" are how we manage to get the footer to anchor to the bottom of the page, and the text to not scroll over it if the text is longer than the height of the browser, etc.

In the HTML you would simply do something like:

            <footer>
               <p>GoldenStag.net &diams; Copyright &copy;2016, Golden Stag Productions &diams; All Rights Reserved</p>
            </footer>
         

This works great, does exactly what I wanted it to do. I have been using it on quite a few sites and have been quite pleased.