+375 (29) 803-95-65
заказать звонок

Как привязать футер к низу страницы с использованием bootstrap 3?

В сети много информации о том, как прижать футер к низу страницы, но если вы используете bootstrap большинство решений не подойдут.
Сложность может заключаться еще и в том, что у контейнера должны быть тени по краям.


Есть решения, где футеру задаётся position: absolute, а родителем выступает тег html. Этот вариант хорош до тех пор, пока на вашей странице не появляются другие элементы, которые необходимо абсолютно позиционировать. Начинается война верстальщика и браузера. Абсолютное позиционирование нужно использовать только там, где другие варианты не подходят.


Можно решить задачу с помощью JS-скрипта. Футеру присваивается заранее определенный класс, если высота контента страницы меньше, чем высота окна браузера. Это тоже ненадежное решение: высоту мы определим только, когда страница полностью загрузится. Элементы на странице будут скакать. Все это упячка.

Мы не станем грузить страницу скриптами. Вот что получилось:



<div class="wrapper container">

	<header>
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<div class="header-inner">
					хэдер
				</div>
			</div>
		</div>
	</header>

	<section>
		<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<div class="section-inner">
				контент
			</div>
		</div>
	</div>
	</section>

	<div class="push"></div>

</div>


<footer class="container">
	<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<div class="footer-inner">
				футер
			</div>
		</div>
	</div>
</footer>

<style>

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

.container{
	width: 970px;
	margin: 0 auto;
	box-shadow: 0 0 0,1px 1px 1px #d5d5d5,-1px 1px 1px #d5d5d5;
	-moz-box-shadow: 0 0 0  ,1px 1px 1px #d5d5d5,-1px 1px 1px #d5d5d5;
	-webkit-box-shadow: 0 0 0  ,1px 1px 1px #d5d5d5,-1px 1px 1px #d5d5d5;
}

.wrapper{
	min-height: 100%;
	margin-bottom: -170px;
}

* html .wrapper{
	height: 100%;
}

.push{
	height: 170px;
}

footer{
	height: 170px;
}

</style>


1) стили блока .wrapper должны быть указаны после стилей .container чтобы не перебивался margin-bottom;
2) цвет фона нужно задать блоку .wrapper, а цвет теней или рамки — блоку .container;

Результат: