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

所以，我承认我不擅长CSS，这可能对我而言有些愚蠢，但我希望在我的每一页底部都有一个粘性页脚现场。每当我打开Chrome控制台时，页脚就会上升

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

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

它的工作原理，当控制台被关闭，但如果我打开Chrome开发人员工具，页脚突然上升，如果它被固定到浏览器窗口，而不是这种情况。

我做错了什么？

其他人如何做粘脚？

编辑

我创建了一个简单的codepen这个问题

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

打开开发者工具页脚下面的例子，你会发现页脚仍然是可见的，不应该它在开发工具背后隐藏着什么？这是问题。提前抱歉，如果它是一个愚蠢的。

来源

2017-02-23 JonnySerra

我们需要看到你的代码的其余部分。给我们一个显示当前行为的[mcve]。 –

@MichaelCoker我用一个非常简单的Codepen更新了这个问题，只需打开开发工具，你会发现当不应该是页脚时它仍然可见。这就是问题所在。 – JonnySerra

由于你知道你可以尝试页脚的高度：

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

有了这个页脚是一个t的底部，除非内容超过窗口高度。如果你想页脚固定到窗口只需添加：

position: fixed; 
bottom: 0;

CodePen：http://codepen.io/MusikAnimal/pen/OpLeEM

来源

2017-02-23 06:37:19 MusikAnimal

如果是position: absolute该元素相对于其第一个定位的（非静态的）祖先元素进行定位。

如果你想坚持到了窗口，使用position:fixed

你可以玩它here

而且为你粘页脚，你应该参考这个漂亮的article

来源

2017-02-23 05:42:06

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

回答

相关问题