Попробуйте эту попытку .

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

Пометка

Page Content

CSS (хорошо , scss)

// our page element

html {
height:100%;
}

body {
height:100%;
}
.wrapper {
background:gray;
min-height:100%;
height: auto !important; // the magic!
height:100%;
margin-bottom:-158px; // the height of our footer + margin
}

.footer-push {
clear:both;
height:158px; // the height of our footer + margin
}

footer {
background:rgba(#a388a3,0.8);
margin-top:20px;
height:138px;
}

Важными здесь являются:

• Настройка высоты: 100% на содержащих элементах (esp html и body ])
• Зная высоту нижнего колонтитула и учитывая его с помощью элемента «push»
• , используя комбинацию min-height height: auto !important и height:100%
]

Надеюсь, что это поможет!