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

Question

首先，请阅读整个问题，以便您完全理解我在寻找什么，谢谢!

这是一个我一直在努力研究的问题，并且让我放弃了一段时间。我可以拥有带有固定页眉的真正粘性页脚吗？

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

这就是我的目标(请原谅我出色的 Photoshop 技能):

当我在页脚上使用 position:fixed; 和 bottom:0; 时，这看起来不错。但要使其真正具有粘性，我需要在我的页面中添加一些 css。 (来自: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/2/

上面的例子有效，但是页脚乱七八糟。我怎样才能在不弄乱我的粘性页脚的情况下实现这种效果？

Answer 1

一个可能的解决方案是将您的 content:after 替换为 content:before。

Working Demo

CSS:

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

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