Нижний колонтитул поднимается всякий раз, когда я открываю консоль Chrome

Question

Итак, я признаю, что я не так хорош в CSS, и это может быть что-то глупое на моем конце, но я хочу иметь липкий нижний колонтитул внизу каждой страницы моего сайт.

Я использую позицию абсолютного это CSS для моей сноски

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

Он работает, когда консоль закрыта, но если открыть инструменты разработчика Chrome, футер внезапно поднимается вверх, как будто это были привязаны к окну браузера, что не так.

Я делаю что-то неправильно?

Как другие липкие нижние колонтитулы?

EDIT

Я создал простой codepen с примером выпуска

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

Открыть Девы инструменты ниже сноски, и вы увидите футер до сих пор виден, не должен Он невидим за инструментами dev? Это вопросы. извините заранее, если это тупой.

Answer 1

Поскольку вы знаете высоту нижнего колонтитула, которую вы могли бы попробовать:

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

Answer 2

В случае position: absolute Элемент расположен относительно его первого позиционированного (не статического) элемента предка.

Если вы хотите, чтобы сделать его придерживаться окон, используйте position:fixed

Вы можете играть с ним вокруг here

И для липкого колонтитула, вы должны обратиться к этому милому article