HTML CSS-粘性页脚

我已经尝试了许多不同的“粘性页脚”技术，但由于某些原因，我无法在我的网站上使用这些技术：

有什么想法吗

---

注意：这与固定页脚不同。我试图让页脚“粘”到窗口的底部，但在任何页面内容的下面-如下所示：

将这4行添加到CSS中的

#footer

position: fixed;
bottom: 0;
left: 0;
right: 0;

---

如果需要固定页脚，请将页脚样式更改为：

#footer {
background: #CCC;
color: #787878;
font-size: 13px;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
}

但别忘了为身体添加填充物：

body {
padding-bottom: 60px !important;
}

…或

下面的代码有效
注意：“页脚推送”是实现此功能的关键：

html, body {
    height: 100% !important;
}
.wrapper {
    min-height: 100% !important;
    margin: 0 auto -75px !important; /* the bottom margin is the negative value of the footer's height */
}

footer, .footer-push {
    height: 75px !important; /* '.push' must be the same height as 'footer' */
    position: relative !important;
}

---

一些参考资料来自：

方法如下：使用。

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}

别忘了这一点：

body {
margin-bottom: 60px;
}

html {
position: relative;
min-height: 100%;
}

---

您可能需要缩小浏览器以查看我指的内容，但它不会显示在页面内容下。i、 e.当你降低浏览器高度时，它覆盖了页面内容main{margin bottom:72px；}仍然没有改变任何东西，这对页脚有一些奇怪的影响。我已经更新了CSS以包含您的更改-仍然不是100%。当您向下滚动时（例如，当您降低浏览器窗口高度时），页脚会向上爬行。只需对页脚使用{position:fixed}，使其始终位于内容的底部。请看一看上面的代码，它已经更新了。还是不行。我尝试了你修改过的代码，但当出现滚动条时，页脚显示在页面内容上方。请看这里：当然有：）。您还需要添加：main{margin bottom:75px；}，这样内容将有一个边距。我希望是这样，但仍然有问题-很抱歉，这是一个痛苦！我再次更新了我的CSS（用element inspector再看一眼）——完全符合您的要求

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}

body {
margin-bottom: 60px;
}

html {
position: relative;
min-height: 100%;
}