Прижать футер к низу окна браузера

Прижать футер к низу окна браузера

Простой способ прижать <footer> к низу окна при малой высоте контента. HTML-верстка следующая:

<!DOCTYPE html>
<html>
<head>
	<title>Site</title>
</head>
<body>
	<div class="wrapper">
		<div class="content">
			<p>Content...</p>
		</div>
	</div>
	<footer class="footer">
		<p>Footer</p>
	</footer>
</body>
</html>
HTML
html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
.content {
	padding: 0 0 100px;
}
.footer {
	margin: -100px 0 0 0;
	height: 100px;
	background: #ffcbcb;
	position: relative;
}
CSS

Результат:

21.08.2019, обновлено 27.08.2019
4705
Предыдущая запись Шахматное поле на CSS
Следующая запись Колоночные шаблоны

Комментарии

, чтобы добавить комментарий.

Другие публикации

Примеры использования cURL в PHP
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS....
219546
+21
Как добавить UTM-метки в заявки с сайта
UTM метки – это дополнительные данные, которые добавляются в URL с помощью GET-параметров при клике на баннер в...
19663
+4
Запись в лог-файл в PHP
Несколько вариантов как быстро организовать запись данных в лог-файл.
80794
+12
Рекомендации по SEO настройке сайта
Сборник рекомендаций по настройке сайта помогающий исключить проблемы при индексировании поисковыми системами.
8910
+5
Кнопки прокрутки страницы вверх и вниз jQuery
Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция...
35010
+6
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
60699
+7