Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?
Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает «кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно (кружок «очумелые ручки» ) или начинающими веб-мастерами.
При этом на первых порах жизни сайта ничего ужасающего не происходит. И такая идиллия продолжается до тех пор, пока контент давит «своим весом » на подвал, не давая ему подняться вверх. Но стоит разместить на странице материал меньшего объема, и недавно «спокойный » футер моментально поднимается вверх, приводя весь дизайн сайта в неподобающий вид.
Для устранения этого «дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:
Первый способ «привязать » подвал «к дну » страницы построен на основе 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); }
Для того чтобы приклеить подвал к низу страницы тег
html { height: 100%; } body { height: 100%; }
Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto . Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
Строчка кода «height: 100% » предназначена для старых версий IE , которые не воспринимают свойство min-height .
Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега
#content { padding: 100px; }
На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые «нейтрализуются » отрицательным значением отступа для футера (margin: -100px ) при установленном для него относительном позиционировании (position: relative ). Таким образом, с помощью отрицательного значения отступа мы «сдвигаем » подвал в область контейнера, для которого установлена высота в 100%.
В данном примере разметка веб-документа задана с помощью сравнительно новых тегов HTML 5 , которые могут быть неправильно интерпретированы устаревшими версиями браузеров. Из-за этого весь дизайн страницы может быть отображен некорректно. Чтобы избежать этого, нужно новые теги из арсенала 5 версии языка гипертекста заменить на обычные
Рассмотренный выше способ того, как сделать футер внизу страницы «незыблемым » не всем подходит. Если в будущем вы собираетесь модифицировать и совершенствовать дизайн своего сайта с помощью всплывающих окон, тогда лучше отказаться от использования предыдущей реализации.
Чаще всего в реализации pop-up окон используется свойство CSS z-index . С помощью его значений задается порядок наложения слоев друг на друга.
Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке «наслоения ».
Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index . Потому что у родителя всплывающего окна (wrapper ) значение этого свойства все равно меньше.
Вот более совершенный вариант:
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); }
Предыдущие способы реализации могут гарантировать, что футер будет всегда внизу страницы. Но только если подвал фиксированной ширины. А что делать, если количество размещаемого в нем контента нельзя спрогнозировать?
Всем привет!
Сайт выглядит эстетично, если все его элементы находятся на своих местах. Однако часто бывают случаи, когда все вроде бы нормально, но что-то все-таки не так... Например, если страница короткая, футер не прижат к низу страницы, а находится там, где ему и положено — после основного блока сайта. Это смотрится не очень красиво.
Поэтому сегодня мы поговорим с вами о том, как прижать подвал сайта к нижней границе окна браузера.
Итак, к подвалу мы выставим следующие требования:
Для примера возьмем простую страницу, состоящую из двух основных блоков: основного (main) и подвала (footer). Сделаем чтобы основной блок занял всю площадь окна браузера независимо от количества контента, при этом футер прижмем к низу экрана так, чтобы в браузере не появилась вертикальная полоса прокрутки. Как делаем:
Делаем 2 блока: основной (main) и подвал (footer). Основной контейнер растягиваем на всю высоту экрана браузера (min-height), подвалу жестко указываем высоту (height).
При этом общая высота сайта составит высота экрана + высота подвала.
Отрицательным отступом (margin-top) «въезжаем» в основной блок, чтобы высота сайта составляла только 100% высоты экрана.
При таком расположении блоков и при достаточном количестве контента (например, текста) в основном блоке, возможны накладки контента в основном блоке на подвал:
Для избежания этой потенциальной проблемы, добавляем в конец основного блока пустой блок, высотой не меньше высоты подвала (а лучше немного больше, чтобы был отступ между контентом и подвалом):
Теперь, если контента будет много, он будет двигать пустой блок вниз. А это будет опускать и подвал, не давая налезть на него контенту.
Смотрим как это выглядит в коде:
<html > <head > <title > Футер прижат к низу</ title > <style type = "text/css" > * {margin: 0; padding: 0;} /* обнуляем отступы */ body { background: #fff;} html,body { height: 100%; /* задаем высоту тела документа */} .main { /* основной блок, который должен растянуться до подвала */ background: #999; /* цвет фона основного блока (для наглядности) */ min-height: 100%; /* задаем минимальную высоту основного блока */} * html .main { /* хак для ie6 */ height: 100%; /* для ие6, т.к. не понимает min-height */} .hFooter { /* это распорка в основном блоке - резервируем место для подвала */ height: 40px; /* высота нашего подвала */} .footer { /* подвал */ background: #0000CC; /* цвет фона подвала (для наглядности) */ color: #fff; height: 40px; /* высота подвала */ margin-top: -40px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */} </ style > </ head > <body > <div class = "main" > Это основной блок <div class = "hFooter" > div > </ div > <div class = "footer" > Это подвал</ div > </ body > </ html > |
Заметка: при использовании блочной верстки и плавающих основных блоков (колонок) для.hFooter следует добавить clear: both, чтобы подвал расположился под колонками.:
.hFooter { clear : both ; height : 40px ; } |
Если Вы уже немного освоили , тогда может возникнуть вопрос: «Зачем использовать дополнительный элемент, если можно воспользоваться padding-bottom?».
Ответ - так просто его тут использовать нельзя, так как размер блока равен его размерам + ширина внутренних отступов + ширина границ. Связка min-height: 100% и padding-bottom даст высоту сайта больше высоты экрана. В итоге даже при отсутствии контента вовсе, подвал будет за пределами экрана.
Недостаток данного приема — это использование дополнительного пустого элемента hFooter. В реальных условиях (когда содержимое сайта не пустое и применяется блочная верстка) этого можно избежать применив - этот прием поможет очистить поток без использования дополнительного элемента, а чтобы контент не налез на футер, пропишем в колонках padding-bottom.
В вышеописанном приеме футер поднимали отрицательным отступом вверх. При этом возникает потенциальная проблема с z-слоями. Например, нам нужно показать всплывающее окно (пускай это будет div), которое будет позиционироваться относительно контейнера main.
<div class = "main" > [...] <div class = "popup" > [...] </ div > </ div > <div class = "footer" > [...] </ div > |
.main { position : relative ; z-index : 1 ; /* z-index меньше чем у футера, чтобы тот был виден */ } .popup { position : absolute ; z-index : 100 ; [ ...] } .footer { height : 50px ; margin-top : -50px ; position : relative ; /* чтобы можно было задать z-index */ z-index : 2 ; /* больше, чем у main чтобы быть видимым */ } |
Все хорошо до тех пор пока у нас не пересекаются всплывающее окно и подвал (а такая ситуация довольно часто возникает) - вот тут начинаются проблемы. Не смотря на то, что у всплывающего окна наибольший z-index, оно будет перекрываться футером, т.к. родитель popup имеет z-index меньший, чем у подвала:
В этом случае нужно искать возможность позиционировать окно не относительно main, а относительно какого-либо другого дочернего элемента, который расположен внутри main. Таким образом, избавимся от указания z-index для main и footer. Но такой вариант не всегда возможен, потому рассмотрим второй вариант прижатия футера.
Идея похожа на решение 1:
HTML: relative ; /* чтобы дочерние элементы позиционировались относительно этого блока */ } .footer { height : 50px ; position : absolute ; left : 0 ; bottom : 0 ; width : 100% ; } * html .footer { bottomy: expression(parentNode.offsetHeight % 2 ? style.bottom= "-1px" : style.bottom= "0px" ) ; /* хак для ие6, у которого есть косяк со смещением на 1px */ }
Такой подход решит проблему с всплывающими окнами, т.к. и footer и popup будут иметь общего родителя, а значит с z-слоями сюрпризов не будет.
Недостаток обоих методов — оба метода годятся только для фиксированного по высоте подвала.
На сегодня все. Теперь Вы знаете, как прижать футер к низу экрана разными способами и какие при этом могут возникнуть проблемы.
Подписываемся на обновления и ждем новых интересных публикаций. Пока.
Влад Мержевич
Подвалом на жаргоне веб-разработчиков называется нижняя часть сайта, где пишутся авторские права, публикуются контакты, выводятся разные счетчики и тому подобная информация. Обычно подвал располагается после всего контента и виден только при прокрутке страницы. В некоторых случаях желательно сделать подвал доступным всегда, независимо от высоты страницы, и зафиксировать его внизу окна браузера.
Для этого воспользуемся свойством position и его значением fixed . При этом элемент остается на одном месте, а его положение задается координатами через свойства top , right , bottom , left . В нашем случае достаточно задать нулевые значения у left и bottom . Ширина фиксированных элементов равна их контенту, что хорошо заметно, если добавить фоновый цвет или рисунок, поэтому необходимо также задать ширину через width как 100% (пример 1).
Пример 1. Фиксированный подвал
Результат примера показан на рис. 1.
Рис. 1. Подвал внизу страницы
Браузер Internet Explorer 6 не поддерживает значение fixed , поэтому в нем данный пример будет работать некорректно. Для IE6 придется дополнить код двумя тегами
Пример 2. Код с учетом IE6
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
В данном примере используется значение absolute свойства position . При абсолютном позиционировании элемент можно поместить в любое место окна браузера, но при этом он прокручивается вместе с содержимым. В этом основное различие между значениями fixed и absolute . Чтобы подвал не перемещался, задается высота страницы как 100% и отсекается все, что не помещается в текущие размеры окна. При этом пропадает вертикальная полоса прокрутки, ее следует добавить к content с помощью overflow .
Еще один неприятный момент это наложение фона подвала на полосу прокрутки, так что придется задать отступ справа на ширину скролбара. При этом, если полосы прокрутки нет, в подвале справа будет зиять дыра.
Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать подвал сайта (footer) в самый низ окна браузера , чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер оставался бы на положенном ему месте.
Если с помощью таблиц сия задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход.
В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS .
HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):
В CSS-код, приведенный ниже, включены только те свойства, которые минимально необходимы для реализации соответствующего способа. По каждому из них вы можете посмотреть живой пример.
Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html , body и.wrapper) на 100%. При этом контентному блоку.content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.
* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { position: relative; min-height: 100%; } .content { padding-bottom: 90px; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; }
Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.
* { margin: 0; padding: 0; } html, body, .wrapper { height: 100%; } .content { box-sizing: border-box; min-height: 100%; padding-bottom: 90px; } .footer { height: 80px; margin-top: -80px; }
Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом.content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.
Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.
* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { display: table; height: 100%; } .content { display: table-row; height: 100%; }
Здесь мы эмулируем поведение таблицы, превратив блок.wrapper в таблицу, а блок.content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку.content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.
В результате footer прижат к низу.
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.
* { margin: 0; padding: 0; } .content { min-height: calc(100vh - 80px); }
100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.