html - 粘性页脚无法正常工作

Question

我想制作一个像本例中那样的粘性页脚。 http://codepen.io/Kenny94/pen/JvtFs

html, body {
      height: 100%;
      width:100%;
        padding: 0;
      margin: 0;
      position: relative;
    }

    div {
        font-size: 30px;
      min-height:100%;
      margin-bottom:60px;
      background: red;
    }

    footer {
      background:green;
      height: 60px;
      position: fixed;
      bottom: 0;
      left: 0;
      Right: 0;
      z-index: -1;
    }

问题是它在我当前的元素中不能正常工作。它将页脚设置在正文后面，但如果我开始滚动，它就会出现。如果我在 chrome 中观察 body 的大小，它的高度为 970px，但由于帖子，整个站点要大得多。在我看来，主体并没有像 Blog Post Wrapper 那样展开。我在正文中将 BG-Color 设置为灰色，并填满了整个页面。我不知道为什么它不适用于 100% 的高度。我可以将高度设置为 4000 像素以适合内容和其他所有内容，但这不是真正的解决方案。

Answer 1

我不太确定您要实现的目标。

-如果您想知道为什么页脚放在正文后面，那是因为您设置了 z-index 到 -1。所以修复是这样的:http://jsfiddle.net/bmpy6/

-如果您不想在滚动时看到它(也就是说，始终将其固定在底部)，这应该是您想要的:http://jsfiddle.net/bmpy6/1/

为此，您省略了 position: fixed;。