CSS: fixed header and footer

Tweet

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!