CSS Sticky Header/Footer and Fully Stretched Middle Area?

Question

With CSS, how can i simply get a page with sticky header and footer which are appearing forever, whenever the page is scrolling or not. I found som

Answer 1

You're probably looking for the "position: fixed;" property, and setting the header to top: 0; and the footer to bottom: 0; You might also consider some padding to your "content area" to account for that header and footer space...

From the top of my head you would have something like:

header { position: fixed; top: 0; height: 100px; }
footer { position: fixed; bottom: 0; height: 100px; } 
#container {  padding: 100px 0; }

If you're using some kind of background on your container and want to stretch it, a height: 100%; should do...

I've never found a good way to use this kind of layout though... =\