Почему нижний колонтитул не внизу

Question

У меня есть сайт, над которым я работаю. Я хочу, чтобы нижний колонтитул был прикреплен к нижней части страницы. Так я последовал за простое руководство, которое в основном это сделал:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    position: relative; 
    padding-bottom: $footer-height + $footer-margin-top; 
} 

.footer { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: $footer-height; 
} 

Это, казалось, работали на старте. Затем я дошел до сцены, где содержание было больше, чем высота порта представления, и тогда ситуация перестала работать.

Если вы посмотрите на this, вы можете увидеть, что нижний колонтитул находится внизу страницы.

Но если вы посмотрите на this, нижний колонтитул находится внизу окна просмотра. Я знаю, что это простое исправление, но я не могу понять это. Может кто-нибудь дать мне руку, пожалуйста.

Answer 1

Вы хотите, чтобы ваша сноска придерживаться в нижней части страницы, если содержание на body не является достаточно большим, что она появляется после прокрутки?

Если да, то вы должны установить height: auto; на вашем теле тега, так что, если это больше, чем 100% набор на вашем min-height правило, он принимает во внимание и толкает футер к низу.

Сообщите мне, если это ваше намеренное поведение.

Answer 2

Изменение position:absolute для .footer в position: fixed

Answer 3

.footer { 
    position: static; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: $footer-height; 
}