Как правильно прижать плавающий футер к низу страницы

Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает» и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?

Кирпич в монитор не пролазит

Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.

Делаем правильный футер для своего сайта

Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает «кверху». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно (кружок «очумелые ручки») или начинающими веб-мастерами.

При этом на первых порах жизни сайта ничего ужасающего не происходит. И такая идиллия продолжается до тех пор, пока контент давит «своим весом» на подвал, не давая ему подняться вверх. Но стоит разместить на странице материал меньшего объема, и недавно «спокойный» футер моментально поднимается вверх, приводя весь дизайн сайта в неподобающий вид.

Для устранения этого «дефекта» сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:

варианты устранения подобной проблемы

Первый способ

Первый способ «привязать» подвал «к дну» страницы построен на основе CSS. Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:

<body>
<div id="wrapper">
<header id="header"> </header>
<div id="content"> </div>
</div>
<footer id="footer"> </footer>
</body>

Код CSS:

html {
	height: 100%;
}
header, nav, section, article, aside, footer {
	display: block;
}
body {
	height: 100%;
}
#wrapper {
	width: 1000px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	
}
#header {
	height: 150px;
	background-color: rgb(0,255,255);
}
#content {
	padding: 100px;
	height:400px;
	background-color: rgb(51,255,102);
}
#footer {
	width: 1000px;
	margin: -100px auto 0;
	height: 100px;
	position: relative;
	background-color: rgb(51,51,204);
}
ля того чтобы приклеить подвал

Для того чтобы приклеить подвал к низу страницы тег <footer> мы вынесли за пределы контейнера (слоя wrapper). Растягиваем всю страницу и содержимое «тела» до границ экрана. Для этого в коде CSS мы задали высоту тегов <html> и <body> в 100%:

html {
	height: 100%;
}
body {
	height: 100%;
}

Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto. Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:

#wrapper {
	
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

Строчка кода «height: 100%» предназначена для старых версий IE, которые не воспринимают свойство min-height.

Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега <content> в 100 пикселей:

#content {
	padding: 100px;	
}

На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые «нейтрализуются» отрицательным значением отступа для футера (margin: -100px) при установленном для него относительном позиционировании (position: relative). Таким образом, с помощью отрицательного значения отступа мы «сдвигаем» подвал в область контейнера, для которого установлена высота в 100%.

В данном примере разметка веб-документа задана с помощью сравнительно новых тегов HTML 5, которые могут быть неправильно интерпретированы устаревшими версиями браузеров. Из-за этого весь дизайн страницы может быть отображен некорректно. Чтобы избежать этого, нужно новые теги из арсенала 5 версии языка гипертекста заменить на обычные <div>:

<body>
	<div id="wrapper">
		<div id="header"> header </div>
		<div id="content"> content</div>
	</div>
	<div id="footer">footer</div>
</body>

Усовершенствованный вариант

Рассмотренный выше способ того, как сделать футер внизу страницы «незыблемым» не всем подходит. Если в будущем вы собираетесь модифицировать и совершенствовать дизайн своего сайта с помощью всплывающих окон, тогда лучше отказаться от использования предыдущей реализации.

Чаще всего в реализации pop-up окон используется свойство CSS z-index. С помощью его значений задается порядок наложения слоев друг на друга.

Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке «наслоения».

Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index. Потому что у родителя всплывающего окна (wrapper) значение этого свойства все равно меньше.

Вот более совершенный вариант:

<body>
<div class="main">
<div class="header">
</div>
    <div class="footer">
</div>
</div>
</body>

CSS — код примера:

html, body {
height: 100%;
}
.header {
height:120px;
background-color: rgb(0,255,102);
}
.main {
min-height:100%;
position: relative;
background-color: rgb(100,255,255);
}
.footer {
height:150px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(0,0,153);
}
подвал мы поместили в состав основного элемента

Как видно из кода, подвал мы поместили в состав основного элемента. Контейнеру мы задали относительное позиционирование, а для футера – абсолютное. Подвал мы закрепили в самом низу контейнера, установив его положение слева и сверху в 0.

Вариант для подвала с нефиксированной высотой

Предыдущие способы реализации могут гарантировать, что футер будет всегда внизу страницы. Но только если подвал фиксированной ширины. А что делать, если количество размещаемого в нем контента нельзя спрогнозировать?

Для этого потребуется более совершенный вариант для нефиксированного подвала. В нем футеру задается значение table-row для свойства display. Благодаря этому он будет отображаться как строка таблицы:

как строка таблицы
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
<p>

Это абзац, расположенный в подвале сайта. Футер нефиксированный, поэтому его размер может подстраиваться под размер содержимого:

</p>
</div>
</div>
</body>

CSS примера:

html,body{
height:100%;
margin:0;
padding:0;
background:#d33;
}
#wrapper{
display: table;
height:100%;
}
#header{
height:100px;
background: rgb(0,255,102);
}
#footer{
background:#769;
display: table-row;
height:20%;
}
#wrapper, #footer{
width:100%;
}
#content{
background:#d33;
}

Футер сайта надежно прижат к низу страницу. Теперь он уж точно не всплывет, и «не поломает» весь дизайн ресурса. И все потому, что для фиксации подвала мы использовали не кирпичи, а возможности HTML и CSS.