Прижать footer к низу экрана

Прижимать footer приходится почти на всех сайтах. Способов существует несколько. Все они между собой чем-то похожи. Рассмотрим один из них.

При использовании данного способа высота подвала должна быть фиксированной. Разметка должна иметь такую структуру:

	<html>
		<body>
			<div class="content"></div>
			<div class="footer"></div>
		</body>
	</html>

Css будет выглядеть так:

	html,body{
		height: 100%;
	}
	.content{
		box-sizing: border-box;
		min-height: 100%;
		padding-bottom: 200px; /*резервируем место под footer*/
	}
	.footer{
		height: 200px;
		margin-top: -200px; /*отрицательный отступ на высоту подвала*/
	}

Вариант 2

Можно сделать немного иначе и обойтись без box-sizing: border-box. Но тогда вывод должен быть чуть-чуть другой

html

	<html>
		<body>
			<div class="content">
				<div class="main"></div>
			</div>
			<div class="footer"></div>
		</body>
	</html>

css

	html,body{
		height: 100%;
	}
	.content{
		min-height: 100%;
	}
	.main{
		padding-bottom: 200px; /*резервируем место под footer*/
	}
	.footer{
		height: 200px;
		margin-top: -200px; /*отрицательный отступ на высоту подвала*/
	}
Share: