Прижать футер к низу страницы
Как прижать футер к низу страницы? Этот вопросом задаются многие, кто сталкивался с версткой макетов для сайта. Дело в том, что если высота блоков в этих макетах не указана явно, то она зависит от количества их содержимого, соответственно, если этого содержимого достаточно мало, то весь макет может занимать высоту меньше чем окно браузера. Естественно выглядит все это не очень красиво. Сейчас я покажу вам несколько способов, которые позволят прижать футер к нижней части страницы и таким образом сделать макет более привлекательным и привычным.
В каждом из примеров будем отталкиваться от того, что макет сайта имеет такую обычную структуру (ваш макет может отличаться, но способы универсальные):
<body>
<div id="header">Шапка</div>
<div id="menu">Меню</div>
<div id="content">Контент</div>
<div id="footer">Футер</div>
</body>Далее для достижения необходимого результата к макету будут добавляться дополнительные блоки, свойства CSS и т.д. Однако в том макете, у которого вы решили прижать футер к низу страницы, эти блоки или некоторые свойства уже вполне могут присутствовать, так что добавлять их повторно не нужно. Все свойства CSS, которые непосредственно участвуют в прибивке футера к низу, снабжены комментариями.
Прижать футер к низу с помощью позиционирования
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - прижимаем футер к низу, используя позиционирование</title>
<style type="text/css">
html, body {
height: 100%; /* высота HTML и BODY */
margin: 0; /* убираем поля по краям страницы */
padding: 0;
}
body {
font-size: 2em;
color: #000;
background: #fff;
}
#wrapper {
min-height: 100%; /* минимальная высота обертки */
height: auto !important; /* для всех браузеров (можно убрать, если поддержка IE6 не нужна) */
height: 100%; /* для IE6, т.к. он понимает height, как min-height */
position: relative; /* позиционируем относительно этого блока */
}
#header {
background: #fc0;
}
#menu {
width: 250px;
background: #0fc;
float: left;
padding-bottom: 100px; /* нижний внутренний отступ у меню */
}
#content {
background: #eee;
margin-left: 250px;
padding-bottom: 100px; /* нижний внутренний отступ у контента */
}
.clear {
clear: both; /* класс для прерывания обтекания */
}
#footer {
width: 100%; /* ширина футера */
height: 100px; /* высота */
position: absolute; /* абсолютное позиционирование */
bottom: 0; /* прижимаем к нижнему краю обертки */
color: #fff;
background: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Шапка</div>
<div id="menu">Меню</div>
<div id="content">Контент</div>
<div class="clear"></div>
<div id="footer">Футер</div>
</div>
</body>
</html>Описание примера
В первом пункте было применено свойство CSS для указания минимальной высоты, которое не понимает Internet Explorer 6. Зато он понимает свойство height как раз как минимальную высоту. Также этот браузер в определенных случаях игнорирует правило !important. Эти его две особенности и были использованы в данном примере для создания хака, чтобы заставить его делать то, что надо, не затрагивая другие браузеры.
Прижать футер к низу с помощью дополнительных блоков
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - прижимаем футер к низу, используя дополнительные блоки</title>
<style type="text/css">
html, body {
height: 100%; /* высота HTML и BODY */
margin: 0; /* обнуление полей по краям страницы */
padding: 0;
}
body {
font-size: 2em;
color: #000;
background: #fff;
}
#wrapper {
min-height: 100%; /* минимальная высота 100% для обертки */
height: auto !important; /* для всех браузеров (можно убрать, если поддержка IE6 не нужна) */
height: 100%; /* для IE6, т.к. он понимает height, как min-height */
}
#header {
background: #fc0;
}
#menu {
width: 250px;
background: #0fc;
float: left;
}
#content {
background: #eee;
margin-left: 250px;
}
#footer_correct {
height: 100px; /* высота блока-корректора */
clear: both; /* прерывание обтекания */
}
#footer {
height: 100px; /* высота футера */
color: #fff;
background: #000;
margin-top: -100px; /* верхнее отрицательное поле */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Шапка</div>
<div id="menu">Меню</div>
<div id="content">Контент</div>
<div id="footer_correct"></div>
</div>
<div id="footer">Футер</div>
</body>
</html>Описание примера
Как и в первом примере, для IE6 здесь был применен специальный хак, позволяющий задать ему минимальную высоту.