每当我打开Chrome控制台时，页脚都会上升 [英] Footer goes up whenever i open Chrome Console

问题描述

所以，我承认我不太擅长CSS，这也许有点愚蠢，但是我想在网站的每个页面的底部都留一个页脚.

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

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

关闭控制台后，它可以工作，但是如果我打开Chrome Developer工具，则页脚突然升高，就好像固定在浏览器窗口上一样.

我做错什么了吗?

其他人如何处理页脚?

编辑

我用问题的例子创建了一个简单的codepen

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

打开页脚下方的开发工具，您会发现页脚仍然可见，在开发工具后面是否不可见?这就是问题.如果是愚蠢的，请提前抱歉.

解决方案

由于您知道页脚的高度，因此可以尝试:

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: http://codepen.io/MusikAnimal/pen/OpLeEM

So, I admit I'm not that good at CSS, and this might be something dumb on my end, but I want to have a sticky footer at the bottom of every page on my site.

I'm using a position absolute this is the CSS for my footer

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

It works when the console is closed, but if I open the Chrome Developer tools, the footer suddenly goes up as if it were fixed to the browser window which is not the case.

Am I doing anything wrong?

How do others do sticky footers?

EDIT

I've created a simple codepen with an example of the issue

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

Open the dev tools below the footer and you'll notice the footer is still visible, shouldn't it be invisible behind the dev tools? That's the questions. sorry ahead of time if it's a dumb one.

解决方案

Since you know the height of your footer you could try:

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

With this the footer is at the bottom unless the content exceeds the window height. If you want the footer to be fixed to window just add:

position: fixed;
bottom: 0;

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

这篇关于每当我打开Chrome控制台时，页脚都会上升的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！