Как прижать футер к низу на CSS

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

Решение с Flexbox

Самый популярный современный метод использует флексбоксы. Он требует минимального кода и хорошо поддерживается:

<main class="content">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	Aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
	fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
	sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
	ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi.
</main>
<footer class="footer">
	footer footer footer
</footer>

body {
	min-height: 100vh; /* занимает всю высоту экрана */
	display: flex;
	flex-direction: column;
	margin: 0;
}

.content {
	flex: 1; /* растягивает основной контент, выталкивая футер вниз */
	
	width: 300px;
	text-align: justify;
	margin: 0 auto;
}

.footer {
	padding: 20px 0;
	box-sizing: border-box;
	background-color: #f8f8f8;
	text-align: center;
}

Решение с CSS Grid

Более современный подход с использованием гридов:

<main class="content">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	Aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
	fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
	sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
	ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi.
</main>
<footer class="footer">
	footer footer footer
</footer>

body {
	min-height: 100vh;
	display: grid;
	grid-template-rows: 1fr auto;
	margin: 0;
}

.footer {
	grid-row: 2;
	
	padding: 20px 0;
	box-sizing: border-box;
	background-color: #f8f8f8;
	text-align: center;
}

.content {
	width: 300px;
	text-align: justify;
	margin: 0 auto;
}

Старый способ

Ранее использовался способ с отрицательным margin.

В этом случае отрицательный отступ у враппера должен быть равен высоте футера. В нашем случае высота футера будет складываться из следующих значений: padding-top + padding-bottom + line-height:

<div class="wrapper">
	<main class="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
		Aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
		fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
		sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
		ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi.
	</main>
</div>
<footer class="footer">
	footer footer footer
</footer>

html, body {
	height: 100%;
	margin: 0;
}

.wrapper {
	min-height: 100%;
	margin-bottom: -55px; /* равен высоте футера */
}

.footer {
	padding: 20px 0;
	font-size: 15px;
	line-height: 15px;
	
	background-color: #f8f8f8;
	text-align: center;
}

.content {
	width: 300px;
	text-align: justify;
	margin: 0 auto;
}