Иногда есть необходимость прижать блок подвала к низу экрана, несмотря на то, что контента не хватает на всю высоту страницы. Решение приведенно ниже.
На нашем примере задана высота подвала в 200px. Следовательно в контейнере container_line нижний паддинг выставляем так же 200px, а самому контейнеру footer_bg выставляем верхний отрицательный отступ так же на 200px.
В итоге подвал всегда будет прилипать к низу экрана, даже если высота страницы ниже высоты экрана.
Если нужно изменить высоту подвала, меняем все 200px на необходимые вам.
HTML
<body>
<div class="container_bg">
<div class="container_line">
<p>Как прижать футер к низу экрана</p>
</div>
</div>
<div class="footer_bg">
<p>футер</p>
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
border: 0;
}
html,
body{
width: 100%;
height: 100%;
}
.container_bg{
min-height: 100%;
}
.container_line{
padding-bottom: 200px;
}
.footer_bg{
height: 200px;
margin-top: -200px;
}