Footer goes up whenever i open Chrome Console

Question

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.

We need to see the rest of your code. Give us a [mcve] that shows the current behavior. — Michael Coker, Feb 23 '17 at 05:41
@MichaelCoker i've updated the question with a very simple Codepen, just open the dev tools and you'll notice the footer is still visible when it shouldn't be. That's the question. — JonnySerra, Feb 23 '17 at 08:47

Saurabh Sharma · Answer 1 · 2017-02-23T05:47:10.767

2

In case of position: absolute The element is positioned relative to its first positioned (not static) ancestor element.

If you want to make it stick to the window, use position:fixed

You can play around with it here

And for your sticky footer, you should refer to this nice article

edited Feb 23 '17 at 05:47

answered Feb 23 '17 at 05:42

Saurabh Sharma

2,422
4
20
41

MusikAnimal · Accepted Answer · 2017-02-23T06:45:02.987

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

Footer goes up whenever i open Chrome Console

2 Answers2

Linked