页脚并不总是粘在底部答案

【问题标题】：Footer doesn't always stick to bottom页脚并不总是粘在底部
【发布时间】：2018-03-21 00:41:02
【问题描述】：

一段时间以来，我一直在尝试在网页中设置页脚，但没有成功。
页脚粘在屏幕底部，如果有滚动条，所以当我向下滚动时，它会向上滑动...
我希望它贴在底部但不像 position: fixed （如果有滚动条，那么我不想看到页脚，直到我滚动到底部）。
我的网站中有 3 个主要组件（页眉、内容和页脚）。
这是页脚css：

background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;

我尝试将 html 和 body 更改为“height: 100%”，但几乎就像我所希望的那样，只有当它使高度大于屏幕时。
就像身高：110%（即使身高的总和是 100%）。
我试图减少它，直到我适应，但 UI 中的每一个小变化都会造成麻烦。

我将非常感谢任何帮助..

【问题讨论】：

看看this answer是不是你要找的东西
您知道页脚的确切高度（以像素为单位）吗？如果是这样，您可以使用 height: calc(100% - footerheight) ，其中 footerheight 是像素值。
@ChaseDeAnda 我试试我在主帖中说的。
@mhodges 谢谢！我相信它会奏效。有什么办法不包括 javascript 吗？
@ChaseDeAnda 如果我给底部的值比 0，那么它就不会在底部。我想我不明白你的解决方案

标签： css reactjs

【解决方案1】：

听起来您正在寻找<footer>。请记住，它不适用于早期版本的 Internet Explorer。 Here 是更多信息。让我知道这是否可行。

【讨论】：

它不起作用..我希望它位于屏幕底部，而不仅仅是容器下方

【解决方案2】：

在你的页脚上试试这个 -

.footer {
        position: relative;
        bottom:  -500px; // you can adjust the negative value
    }

【讨论】：