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;
    }

问题是它在我当前的项目中无法正常工作。它设置了身体后面的页脚，但如果我开始滚动它会出现。如果我用铬合金观察身体的大小，它的高度可以达到970px，但由于这个帖子，整个网站都要大得多。在我看来，身体没有像Blog Post Wrapper那样扩展。我将BG-Color设置为灰色，然后填充整个页面。我不知道为什么它不适合高度100％。我可以将高度设置为4000px以适应内容和其他所有内容，但这不是真正的解决方案。

Answer 1

我不确定你想要达到的目标。

- 如果你想知道为什么页脚放在身体后面，那是因为你设置了 z-index to -1. 所以修复就是：http://jsfiddle.net/bmpy6/

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

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

Answer 2

您无需在html标记或body标记上设置高度。它将与内容一起流动。您将主div的最小高度设置为100％。当加载视图将页脚从屏幕上移开时，这将占用剩余的剩余空间。您可以更改主div的高度，也可以将页脚位置固定在屏幕底部，如果您希望它粘在屏幕底部那么粘。

Answer 3

更改：

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

致：

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

只需更改z-index就可以将页脚放在前面。请记住，Z-index在可见性方面基本上使您的id和类优先于彼此。

Answer 4

您根本不需要设置高度。试试这个：

div {
     font-size: 30px;
     margin-bottom:60px;
     background: red;
    }

而不是：

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

你看，当你告诉页面高度为100％时，你会告诉它填满100％的屏幕高度。当你移除高度时（在这种情况下它是一个最小高度，因此它会在需要时展开）<div>扩展到保持内容所需的高度。
See this JSFiddle for a working example
希望这有帮助！

粘滞页脚无法正常工作

4 个答案: