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?EDITI've created a simple codepen with an example of the issuehttp://codepen.io/anon/pen/yMLBdJOpen 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 contentmain { 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控制台时,页脚都会上升的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!