Sticky footer with sticky header?

Question

Is it possible to make sticky footer with sticky header?

Everything works great but when I apply sticky header I need to make body { padding-top: 60px; }

Answer 1

Why don't you just add padding-top: 60px; to .content instead of .wrap?

jsFiddle: http://jsfiddle.net/NFpDG/2/

Answer 2

I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.

So using best practices from various sources I came up with this solution:

http://jsfiddle.net/vfSM3/248/

The thing i wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.

here is simple css:

html, body {
  height:100%;
  margin:0;
  padding:0;
}
header {
  height: 4em;
  background-color:red;
  position:relative;
  z-index:1;
}
.content {
  background:white;
  position:absolute;
  top:5em;
  bottom:5em;
  overflow:auto;
}
  .contentinner {

}
.container {
  height: 100%;
  margin: -4em 0 -2em 0;
  background:green;
  position:relative;
  overflow:auto;
}
 footer {
   height: 2em;
   position:relative;
   z-index:1;
   background-color:yellow;
}