每当我打开 Chrome 控制台时，页脚就会上升答案

【问题标题】：Footer goes up whenever i open Chrome Console每当我打开 Chrome 控制台时，页脚就会上升
【发布时间】：2017-07-13 11:19:34
【问题描述】：

所以，我承认我不太擅长 CSS，这对我来说可能有些愚蠢，但我希望在我网站的每个页面底部都有一个粘性页脚。

我使用的是绝对位置，这是我的页脚的 CSS

    position:absolute;
    bottom:0;
    height:50px;
    padding: 10px;
    width:100%;

当控制台关闭时它可以工作，但是如果我打开 Chrome 开发者工具，页脚突然上升，好像它被固定在浏览器窗口中一样。

我做错了吗？

其他人如何做粘性页脚？

编辑

我创建了一个带有问题示例的简单代码笔

http://codepen.io/anon/pen/yMLBdJ

打开页脚下方的开发工具，你会发现页脚仍然可见，在开发工具后面不应该是不可见的吗？这就是问题。如果这是一个愚蠢的，请提前道歉。

【问题讨论】：

我们需要查看您的其余代码。给我们一个显示当前行为的minimal reproducible example。
@MichaelCoker 我已经用一个非常简单的 Codepen 更新了这个问题，只需打开开发工具，您就会注意到页脚在不应该出现时仍然可见。就是这个问题。

标签： css footer sticky-footer

【解决方案1】：

在position: absolute 的情况下，该元素相对于其第一个定位（非静态）祖先元素进行定位。

如果你想让它粘在窗口上，请使用position:fixed

你可以玩弄它here

对于你的粘性页脚，你应该参考这个漂亮的article

【讨论】：

【解决方案2】：

既然你知道页脚的高度，你可以试试：

html, body {
    height: 100%;
}

// wrapper around all content
main {
    min-height: 100%;
}

main::after {
    content: '';
    display: block;
    height: 70px; // height + padding
}

footer {
    background: grey;
    margin-top: -70px;
    padding: 10px;
    height: 50px;
    width: 100%;
}

除非内容超过窗口高度，否则页脚位于底部。如果您希望将页脚固定到窗口，只需添加：

position: fixed;
bottom: 0;

代码笔：http://codepen.io/MusikAnimal/pen/OpLeEM

【讨论】：