November 6, 2014

#T4 -Tips and Tricks - Pure CSS Sticky Footers

November 6, 2014

Who doesn’t like a walk down memory lane? In our #T4 series, SoftLayer brings back popular tech tip blog posts. #ThrowbackThursday #T4 #ThrowbackThursdayTechTips

Sticky footers are still landing developers in, well, sticky situations. Don’t fret—we’ve all been there. We’re bumping our popular Tips and Tricks – Pure CSS Sticky Footers blog post that was originally posted two years ago today!

Our objective is simple: Make the footer of our web page stay at the bottom even if the page's content area is shorter than the user's browser window. We got a LOT of feedback the first time this blog was posted, a lot of you loved it, and some of you brought to my attention that some browser environments didn’t support this method.

For this throwback, I have modified the code (the HTML and the CSS), but as you can see, not by too much, only a few things have changed. This method uses the: after attribute, which in my opinion is a LOT cooler. This should help those of you who could not get the previous method to work as this utilizes more of a modern technique and has a lot more universal compatibility!

So enjoy!

Go from this:

CSS Footer

To this:

CSS Footer

  1. Start by getting the HTML structure in place first:
    <div id="page">
     
          <div id="header"> </div>
     
          <div id="main"> </div>
    </div> <!-- /page -->
     
    <div id="footer"> </div>
  2. Then code the CSS for the full page:
    * {
          margin: 0;
     
    html, body {
     
          height: 100%;
    }
  3. Code the rest as:
    #page {
          min-height: 100%;
          margin-bottom: -100px; /* equal to the fixed height of your footer */
    }
     
    #page:after {
          content: “”;
          display:block;
    }
     
     
    #footer, #page:after {
          height: 100px;
    }
  4. For Internet Explorer to not throw a fit, we need concede that IE doesn't recognize min-height as a valid property, so we have to add Height: 100%; to #page:
    #page {
          Min-height: 100%;  /* for all other browsers */
          height: 100%;  /* for IE */
          position:relative;
    }

To read my FAVORITE perk of this trick: check out the original post here.

For questions, comments, or just feel like chatting, contact us at social@softlayer.com.

-Cassandra

Leave a Reply

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Leave a Reply

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.