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

Простой способ прижать <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 58
Предыдущая запись Шахматное поле на CSS
Следующая запись Колоночные шаблоны

Поделится

Темы

CSS HTML

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

Отцентрованные шаблоны для десктопной версии с фиксированной шириной 960px и прижатым подвалом. Хорошо подходят для...
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS....
Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция...
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
Мета-теги в head страницы, которые влияют на работу и функции Internet Explorer, Edge и Windows.