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

Question

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

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

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

它在控制台关闭时工作，但如果我打开 Chrome 开发人员工具，页脚突然上升，就好像它固定在浏览器上一样 window 但事实并非如此。

我做错了什么吗？

别人是怎么做粘性页脚的？

编辑

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

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

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

Answer 1

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

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

你可以玩玩它here

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

Answer 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%;
}

这样，除非内容超过 window 高度，否则页脚位于底部。如果您希望页脚固定为 window，只需添加：

position: fixed;
bottom: 0;

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

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

Footer goes up whenever i open Chrome Console

css

footer

sticky-footer