Wednesday 25 January 2012

CSS: fixed header and footer

   


Today we are going to create a header and a footer with fixed position. Our page will have a center part which will naturally overflow when needed, while the header and the footer will stay where they are (top and bottom). The content in the central part will eventually go under the header (when scrolled down) and under the footer (if longer than the viewport).
Nothing complicated, but we will need some little CSS tricks.

Let's start.


HTML part
The HTML part is very simple. In the body of our page, we just place three divs: one for the header, one for the footer and one for the content:
<div class="header"> header </div>
<div class="content"> content</div>
<div class="footer"> footer</div> 
Easy, isn't it? Let's see the CSS part

CSS part
The rules for the above divs should be put in the head of your document. The first part is just generic:
body   {
    font-family: Tahoma;
    font-size: 12px;
    color: #000000;
    padding: 86px 0px 144px 0px;
    margin: 15px;
}
@media screen{
    body>div.footer{
      position: fixed;
}
    body>div.header{
      position: fixed;
}
}
* html body{
   overflow:hidden;
}
In the above code, what is to be noted is the padding rule for the body. The values are 86px, 0px, 144px and 0px. The important values are 86px for the header height, and 144px for the footer height.
Now let's place some rules for the container div:
* html .container {
    height:100%;
    overflow:auto;
}
And then the header and the footer divs:
.header {
    width: 100%;
    height: 36px;
    padding-top: 20px;
    padding-bottom: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
    background:white;
    text-align:center;
}
.footer {
    bottom: 0px;
    left: 0px;
    text-align: center;
    width: 100%;
    position: absolute;
    height: 72px;
    background:white;
    padding-top: 20px;
}
Those two parts place the header and footer (absolute positioned) at the top and at the bottom of our page.
We can play with heights, paddings and margins of the divs, and change the padding of the body as well, in order to find a desired solution.
Important: the background of the header and the footer must be set, in order to make the content go under them.

And that is all for today: enjoy!

7 comments:

  1. Hi Marco,

    Nice article, but why not using the html5 tags: header and footer instead of div.

    ReplyDelete
    Replies
    1. Hey man. Good question. Maybe because I still am not very much on HTML5. I still believe we might have compatibility problems. But if you like, you're free to use it :-)

      Delete
  2. Hi Marco,

    There are still small problems with rendering HTML5 in different browers but this doesn't keep me away from using HTML5 because for the new structure tags. I use some tools like:

    [resetting] http://html5boilerplate.com/ and
    [HTML5 new elements in IE solved] http://code.google.com/p/html5shiv/

    New websites designed in HTML5 are nice rendered in every browser.

    ReplyDelete
    Replies
    1. I believe you're right Still_asp. I probably still have too many reserves on HTML5... I will think about it it and thanks for the valuable resources!

      Delete
  3. hey that was a cool class, i did not render it yet but it was still cool.

    ReplyDelete
  4. Nice article!
    I am relatively new to CSS, could you explain the 86 & 144 px in padding?

    ReplyDelete
  5. Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!

    ReplyDelete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.