Header and footer with fixed position while content is scrollable?

Question

I\'m trying to make a website where header and footer have fixed position while content scrolls in the middle.

Answer 1

The easiest fix for this is to add padding equivalent to the height of your static header and footer:

#content {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
}

JSfiddle