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

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

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

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

当控制台关闭时，它可以工作，但是如果我打开Chrome开发者工具，页脚会突然上升，就像它固定在浏览器窗口上一样，情况并非如此

我做错什么了吗

其他人怎么做粘脚

编辑

我用一个例子创建了一个简单的代码笔

---

打开页脚下方的开发工具，您会注意到页脚仍然可见，它不应该在开发工具后面不可见吗？这就是问题所在。如果是哑元素，请提前道歉。

如果是

位置：绝对的

元素，则该元素相对于其第一个定位（非静态）的祖先元素定位

如果要使其粘在窗口上，请使用

position:fixed

你可以玩玩它

---

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

，因为您知道页脚的高度，您可以尝试：

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;

---

CodePen:

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