Как правильно прижать плавающий футер к низу страницы
Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает» и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?
Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.
Делаем правильный футер для своего сайта
Многие владельцы сайтов встречаются с этой проблемой, когда 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.