Как прижать подвал к низу экрана

how to press the footer to the bottom of the screen Иногда есть необходимость прижать блок подвала к низу экрана, несмотря на то, что контента не хватает на всю высоту страницы. Решение приведенно ниже.

На нашем примере задана высота подвала в 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;
}