Html 固定高度重叠粘性页脚

我已经尝试过很多粘贴页脚的尝试，但似乎没有一个能与最新的浏览器配合使用，所以我尝试纯粹用CSS构建自己的

代码如下。由于我是一名网络开发新手，我想问一下是否有人能看到下面代码的任何问题。它似乎与最新的chrome、firefox和safari一起工作。在此阶段，向后兼容性并不重要

HTML:

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

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

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

---

用引号括住ID，并添加

display:block到您的页脚。
为什么有Z索引：5

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

虽然我会使用
..
而不是
*页脚内容*

而且看起来不错
 html id应该用引号括起来：“为什么要使用
z-index:5
？@cclark413不值一文，根据。然而，按照惯例，属性通常是双引号的，并且对带引号的属性值的限制较少。更多信息可用。@Zhihao:谢谢分享！不知道…@Zhihao我也不知道！谢谢为什么要添加
display:block
对于
，它已经是一个块元素了？div不会确认大小，除非它有要填充的内容或打开了显示块。如果我不使用z-index，它将如何位于内容顶部？假设您的内容是一个例如图像，并且您希望它覆盖整个屏幕。然后是的，我会使用Z索引1作为页脚，Z索引0作为内容。但只有当您希望页脚覆盖内容时，才会出现这种情况。所以不在它下面！但是，如果您希望在内容下方显示页脚，则不需要为其中任何一个设置Z索引。因此，如果您的页脚覆盖了整个屏幕，您可能不需要为页脚设置Z索引，因为页脚会粘在底部的内容上。