具有固定页眉的真正粘性页脚？

首先，请阅读整个问题，以便您能够充分理解我在寻找什么，谢谢！

这是我长期以来一直在尝试研究的一个问题，并且困扰了我一段时间。我可以有一个真正的粘性页脚和固定页眉吗？

如何实现带有固定页眉的粘性页脚？我无法向正文或内容添加填充或边距，因为这会破坏页脚。另外，我希望能够使用width:100% and height: 100%在我的内容中，而不会溢出并造成混乱。

这就是我的目标（请原谅我出色的 Photoshop 技巧）：

这看起来不错，当我使用时position:fixed; and bottom:0;在我的页脚上。但为了使其真正具有粘性，我需要在页面中添加一些 css。 （从 ：http://css-tricks.com/snippets/css/sticky-footer/ http://css-tricks.com/snippets/css/sticky-footer/)

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

这使我能够拥有一个看起来很棒的粘性页脚，但问题就在这里。一些内容位于我的固定导航栏下方。

我无法向正文、html 或内容添加填充或边距，因为这会使粘性页脚变得混乱。有什么方法可以在没有CSS“Hacks”的情况下做到这一点？

这是标题下的内容：http://jsfiddle.net/g2ydV/3/ http://jsfiddle.net/g2ydV/3/

看起来不错吧！但是有些内容隐藏在标题下面？让我们通过向内容添加边距来解决这个问题：http://jsfiddle.net/g2ydV/2/ http://jsfiddle.net/g2ydV/2/

上面的例子有效，但是页脚混乱了。如何在不弄乱粘性页脚的情况下实现这种效果？

一种可能的解决方案是交换您的content:after to content:before.

工作演示 http://jsfiddle.net/g2ydV/4/

CSS:

/* .content:after {
     content: "";
     display: block;
} */

.content:before {
 content: "";
 display: block;
 height: 45px;
}