Fixed header + sticky footer

Question

Hey Stackoverflow team,

I have a tiny problem with fixed header and sticky footer. Code is available here: http://jsfiddle.net/sgWxh/

What I want o achieve: + Header which stays always on top, even during scrolling - its visible always in the same place, + Footer which is sticked to the bottom of page - it's NOT visible during scrolling, unless you will get to the bottom of page.

I see that position fixed is not working on some way with sticky footer made in this way:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

any ideas?

Answer 1

Just came across this page because I had the same problem. Instead of margin-top you have to use padding-topand box-sizing: border-box:

http://jsfiddle.net/sgWxh/20/