粘性页脚不能正常工作

我想做一个粘性页脚，就像我在这个例子中做的那样。 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颜色设置为灰色，并填充整个页面。我不知道为什么它不能在身高100％的情况下工作。我可以将高度设置为4000px以适应内容和其他所有内容，但这不是真正的解决方案。

来源

2014-07-15 Kenny

您可以添加'html'代码。我们需要更多信息，以便我们能够更好地帮助您。 – rob

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

来源

2014-07-15 21:48:03 dsum27

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

- 如果你想知道为什么页脚置于身体后方，那是因为你设置 z-index to -1. 所以解决将是这样的：http://jsfiddle.net/bmpy6/

- 如果你不想滚动时有可见它（也就是说，始终将它固定在底部），这应该是你想要的：http://jsfiddle.net/bmpy6/1/

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

来源

2014-07-15 21:48:28 tinthetub

变化：

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-索引基本上使您的ID和班级的可见性优先于彼此。

来源

2014-07-15 21:56:12 DolbyOver

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

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
希望这有助于！

来源

2014-07-15 22:05:46

粘性页脚不能正常工作

回答

相关问题