固定高度重叠粘性页脚

Question

我已经经历了很多粘性页脚尝试，但它们似乎都没有与最新的浏览器一起使用，因此我尝试使用CSS完全构建自己的。

代码如下。由于我是新手网络开发人员，我想询问是否有人可以看到以下代码的任何问题。它似乎与最新的chrome，firefox和safari一起使用。在这个阶段，向后兼容性并不重要。

HTML：

<div id="page-content">*Page content*</div>
<div id="page-footer">*Footer content*</div>

CSS：

#page-content {
    overflow: scroll;
    padding-bottom: 100px;
    height: 100%
}

#page-footer {
    height: 100px;
    position: fixed;
    bottom: 0;
    z-index: 5;
    background-color: black;
}

Answer 1

为什么你有一个Z指数：5？

如果真的与其他4层重叠，那么我理解。但如果不是，就把它拿出来。

虽然我会使用<footer>.....</footer>代替<div id="page-footer">*Footer content*</div>

此外看起来不错。

Answer 2

使用引号包围ID，并将display:block;添加到页脚。