Когда на странице сайта мало контента, то при обычной блочной верстке подвал (он же футер) прижимается кверху, хотя по логике вещей должен бы находиться внизу экрана. Но так уж устроены браузеры, что все содержимое страницы кучкуют вверху экрана, занимая плотно все свободное место. Особенно бестолково это выглядит, когда дизайнер рисует футер в виде земельки с травками и прочими жучками. Тут уж хочешь не хочешь, а надо как-то придавить непослушный подвал к низу монитора, вне зависимости от количества контента на странице.
В своей книге о верстке 3-х колоночного шаблона для ВП я уже рассказывал, как этого можно добиться. Но решил вынести темку в отдельный пост, так как вопрос этот довольно частый. Рецепт был найден у вебмастера с кувалдой. Респект ему и уважуха!
Итак, принцип следующий: если мы верстаем страницу, помещая все блоки в один общий контейнер, то блок футера нужно вынести за пределы контейнера. При этом нужно обоим блокам задать относительное позиционирование (position: relative;), в блоке контейнера добавить внизу пустую блок-распорку по высоте равную высоте футера, а футеру, в свою очередь, задать отрицательный верхний отступ на то же значение. В листе стилей у блока контейнера будет задана минимальная высота в 100%. Получится, что контейнер у нас распространится на всю высоту экрана. Но чтобы подвал не потерялся за нижним краем монитора, мы его “подтянем” вверх на отрицательную высоту. То есть, чтобы проделать этот трюк, надо заранее знать, какой высоты будет подвал. Ну, а так как мы это уже знаем, то нет ничего проще.
Теперь подробнее. Общая схема страницы следующая:
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftside"></div>
<div id="rightside"></div>
<div class="clearfloat"></div>
<div class="empty"></div>
</div>
<div id="footer"></div>
</body>
</html>
Это 2-х колоночная страница с шапкой и подвалом. Колонка leftside — основной контент, колонка rightside — сайдбар, расположенный, соответственно, справа. Блоки шапки (header), левой и правой колонок находятся в общем блоке контейнера. Сразу после блока сайдбара (rightside) мы прописали так называемую “очистку” — clearfloat. Она помогает избавиться от всяческих глюков и не пускает подвал запрыгивать в пустое пространство страницы, буде там таковое образуется. Вообще, небольшой совет: пишите этот clearfloat всегда. При плавающей верстке (а блочная иногда так и называется) это очень полезная штука.
Сразу после очистки, но до(!) закрытия блока контейнера, мы поместили пустой блок-распорку empty, тем самым зарезервировав место под подвал.
Теперь посмотрим содержимое листа стилей. Я приведу лишь наиболее важные правила, которые реализуют нужный нам эффект. Все попутные правила я опускаю.
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
width: 100%;
height: 100%;
}
* html #container {
height: 100%;
}
body {
background: #fff;
color: #333;
}
#container {
position: relative;
width: 960px;
margin: 0 auto;
min-height: 100%;
}
.clearfloat {
clear: both;
}
.empty {
height: 50px;
}
#footer {
position: relative;
background: #333;
width: 960px;
height: 50px;
color: #ccc;
font-size: .9em;
margin: -50px auto 0;
}
Что тут есть. Во-первых, мы задаем отдельным набором правил размеры всей страницы как 100% по высоте и по ширине:
html, body {
width: 100%;
height: 100%;
}
Во-вторых, обязательно прописываем хак для ИЕ, иначе он не станет толком работать:
* html #container {
height: 100%;
}
Далее пишем правила для контейнера. Здесь важными являются два момента: относительное позиционирование (relative) и указание на минимальную высоту, опять же в 100%.
#container {
position: relative;
width: 960px;
margin: 0 auto;
min-height: 100%;
}
Для очистки применяем вот такое нехитрое правило:
.clearfloat {
clear: both;
}
А вот пустой блок-распорка имеет следующие параметры:
.empty {
height: 50px;
}
Здесь мы задали только высоту. Как я уже и говорил, высота эта берется из высоты самого футера. То есть, подразумевается, что его высота уже задана в 50 пикселей. Это важно. И вот почему:
#footer {
position: relative;
background: #333;
width: 960px;
height: 50px;
color: #ccc;
font-size: .9em;
margin: -50px auto 0;
}
В наборе правил для подвала мы задали точно такую же высоту. Но обратите внимание: здесь тоже относительное позиционирование (relative), а в самом нижнем правиле прописан минусовой отступ в те же 50 пикселей. То есть, выходит, что контейнер распространился на всю высоту монитора, и по идее, вытеснил подвал за пределы монитора. Но мы смещаем подвал (благодарая опять же относительному позиционированию) на 50 пикселей вверх. Словно бы накладывая подвал поверх контейнера. И в результате и овцы целы и волки довольны. Вот такая вот петрушка.
Пример страницы можно посмотреть здесь, а здесь файл CSS для нее.
Не менее подходящая работа — проектно-изыскательские работы,
а так же малая энергетика. Выбирай — не хочу. Трудиться надо. Надо работать. Работать надо! :)
Большое спасибо, Игорь.
От себя добавлю для таких же начинающих, как и я сам - чтобы подвал не заезжал за нижний край надо ещё убрать padding (а возможно и margin) в css для body и #container.
Дело в том, что я сначала читал уроки по блочной вёрстке, а потом пробовал как-то приклеить футер книзу на той же странице. CSS там, конечно, отличатся от приведённого выше. :)
Ответить
Да, верно, может потребоваться корректировка. Например, если контейнеру задать рамку всего в 1 пиксель толщиной, то появляется вертикальная полоса прокрутки. Как раз на эти пару пикселей (1+1). Но сам принцип, думаю, понятен.
Ответить
Игорь, спасибо за статью, как раз собиралась на днях заняться изучением данного вопроса. Так что очень кстати
Ответить
rust, не за что! :) Рад, что пригодилось.
Ответить
За темку спасибо,оказалось то все так прсто:) Да и книгу о верстке скачаю,если там все так же доступно,то можно считать что клад сегодня нашел)))
Ответить
Спасибо! Очень полезный материал, воспользовался :)
Но, насколько я могу судить, указывать position: relative здесь совсем не имеет смысла :)
Ведь свойства left или top не заданы - положение футера задается margin`ом. В соответствии с текущей разметкой HTML по стандартным правилам. Т.е., хоть relative, хоть дефолтный statiс - не имеет значения.
Так что static имхо логичней получается. Или не так?
Ответить
Средняя часть получается не резиновая???
Пихаю туда материал, он подкладывается под футер и выезжает снизу из под него…
Ответить
Млин это я что=то нахимичила, в вашем файле резиновый. Пошла мучится. Спасибо за материал!
Ответить
Спасибо, как раз искал подобное решение.
Ответить
Действительно, а зачем задавать position: relative?
Ответить
stellar, Михаил, да вы правы. У блока footer это правило можно смело удалить.
Ответить
Игорь. Вы нужный человек.
Спасибо за вышепреведенную статью
С Уважением,
Шевельков Иван
Ответить
Спасибо, Иван, на добром слове! :)
Ответить
Игорь, попробовал все это проделать, получилось, что ни для блока #container, ни для #footer задавать position: relative не нужно - все и так хорошо работает. А если у #container позиционирование оставить, а у футера убрать, футер провалится. Если задать позиционирование только для футера - тоже все отлично. А так хорошая статья, большое Вам спасибо.
Ответить
Михаил, а в IE6 пробовали смотреть? Я уже, честно, не помню почему, но на сайте автора, где я нашел данную фишку (http://webmolot.com/prizhimaem-futer-k-nizu/), было про это дело какое-то обсуждение тоже. Там, кстати, в комментах много чего интересного появилось за год. Советую почитать.
Ответить
Да, в IE 6 тоже смотрел, все работает корректно, как написал выше. За ссылку спасибо, почитаю. Скажите, есть ли способ прижать футер не фиксированной высоты?
Ответить
Про такое пока не слышал. Если найду - расскажу обязательно.
Ответить
Вопрос как сие реалиловать чтоб по ширене браузера было и резиновое?
Ответить
Дмитрий, не пробовали задать центральному блоку ширину в 100%?
Ответить
вопрос а по высоте? чтоб при малом наполнении контента растянуть на всю область окна браузера прижав колонки к подвалу, а при большем подвал уезжал вниз
Ответить
Так статья как раз об этом и написана. Другой вопрос: а надо ли при малом количестве контента делать резину? Что получится в результате на мониторе в 22″ и разрешении экрана 1680х1050? Такой сайт там просто потеряется. Имхо, не вижу смысла в подобных упражнениях. Хотя, каждый волен выбирать что ему по душе :)
Ответить
Если двухколоночный сайт - контент и вертикальное меню, возможно ли данным методом обеспечить их одновременное растяжение и прилипание к футеру, хоть контент заполненный, а меню полупустое.
Или есть другой способ?
Ответить
Aleksandr, да, возможно. Тут фишка не в том, что что-то “прилипает” к подвалу, а сам подвал постоянно находится внизу, внезависимости от количеста содержимого в блоке контента или колонки навигации. Попробуйте, и если возникнут сложности, скиньте файлы в мыло, я подскажу что не так.
Ответить
Здравствуйте, Игорь.
Наконец-то нашла у вас код, который действительно работает во всех случаях и во всех браузерах.
Спасибо Вам! А то порой ищешь нужный код, а он не всегда правильный.
Ответить
Приветствую! Вэлкам! :)
Ответить
А кто-нибудь может подсказать, как растянуть sidebar от шапки до футера?:)
Ответить
Scream, а что конкретно нужно растянуть: фон или содержимое? Если первое, то следует просто нарисовать одну общую картинку-полосу для контента и сайдбара и задать ей повтор по вертикали. А если второе - пишите больше! :)
Ответить
Спасибо за рецепт. Сам полдня мучился, так и не сделал. А тут даже в ИЕ6 все работает как надо.
Ответить
Спасибо очень помогло))) Доволен)!
Ответить
Не за что!
Ответить
Большое спасибо. Каждый проект у меня начинается с этой страницы.
Ответить
Макс, вэлкам!
Ответить
Огромное спасибо! перерыл кучу информации, и нигде не смог найти такого хорошего описания. Очень помогло.
Ответить
Не за что, Виктор! Рад, что смог чем-то помочь :)
Ответить
Здравствуйте Игорь! Спасибо вам за статью и за книжку! У меня один вопрос никак не могу прояснить - футер к низу экрана прижал, а как растянуть столбцы на всю длину? Вот у такого шаблона - http://blog.html.it/layoutgala/LayoutGala01.html чтобы цветные области по бокам доходили прямо до футера и вместе с ним до низа экрана соответственно :-).
min-height: 100% для них уже почему-то не работает. Что-то я и так и сяк пробовал но не получилось, в чем фишка?
Ответить
Игорь Квентор 18.11.2010
@Александр, здравствуйте! Самое простое, что можно сделать в этом случае - нарисовать полоску фона по ширине главного контейнера и высотой в несколько пикселей. У этой полоски соответственно покрасить левую и правую часть в нужные цвета, а середину оставить белой. Потом задать ее в качестве фона с повтором по высоте (repeat-y)
Ответить
Александр 18.11.2010
@Игорь Квентор, аааа, понял, точняк %-) обязательно попробую, спасибо!!!
Ответить
Александр 23.11.2010
@Игорь Квентор, А если мне нужна резиновая верстка? Допустим правый и левый столбцы - фиксированной ширины, а середина тянется?
Ответить
Игорь Квентор 24.11.2010
@Александр, заполнить обе боковые колонки под завязку, чтобы на любое разрешение экрана хватило :) Если честно, то не вижу смысла в резиновой верстке. Любой текст хорошо воспринимается, когда в строке не более 9 - 12 слов. Если будет больше, а именно это и случается при растягивании контентной части, то читать становится неудобно и информация плохо воспринимается.
Ответить
Спасибо, работает теперь :)
Ответить
Игорь, спасибо большое!!! … даже не большое, а огромное!!! Весь интернет обшарил, но только у вас смог найти правильное решение этой проблемы (3 дня пробовал разными способами, но все никак не хотели прижимать мой футер к низу страницы). Как я рад…. Всё-таки, побольше бы таких хороших людей:)
Ответить
Игорь Квентор 07.03.2011
@Андрей, не за что! :)
Ответить
Игорь, прекрассная статья, все работает, НО
когда внутрь футера вставляю картинку ТАКОГО же размера по высоте как указано в стиле футера, то внизу футера, то есть за его пределами появляется тоненькая горизонтальная полоска цвета фона всей страницы ….
Но это только в IE !!
В Хроме, оепре и файрфоксе все прекрассно,
подскажите, в чем тут может быть дело?
Ответить
Игорь Квентор 20.05.2011
@Виталий, увы, не видя вашей страницы, сказать в чем причина не смогу.
Ответить
А как решить такую проблему у меня в html прописано что бы растягивать фон на весь экран браузера но если дописать width: 100%;
height: 100%;
то фон исчезает, но зато футер встает внизу экрана
html
{
background: url(pic/fon.jpg) no-repeat center center fixed;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto;
background-size: auto;
}
Ответить
Спасибо решил данную проблему, перместил
background: url(pic/fon.jpg) no-repeat center center fixed;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto;
background-size: auto;
в body и тогда фон растянут и стоит на месте и футер прижат к низу
Ответить
Огромное спасибо!Я целый день не мог найти статью, где точно, подробно и понятно написано, как это сделать!Thanks!!!
Ответить
Игорь Квентор 17.07.2011
@Рагим, вэлкам!
Ответить
Огромное спасибо за статью, но у меня не прижимается. Может ли это связано с тэгом (нужен обязательно т.к. runat server). т.е. конструкция такая .
Ответить
о как -)) спасибо .. всё работает как надо ..
я столкнулся с проблемой прижатия футера недавно.. до этого как-то странички маленькие не делал .. и после попыток 20-ти наверное разными способами уже полез гуглить ..кстати если гуглить тоже вариантов много предлагается но не все рабочие.. много кривых ..
Ответить
если футер будет меньше 40-50 пикселей, то данное решение не работает, подвал не прижимается и это практически во всех браузерах. Для в качестве, решения можно попробовать calc, но пока свойство доступно только для 2-х браузеров.
(в данном случае размер футера 23 пиксела)
height: -moz-calc(23px + 26px);
height: calc(23px + 26px);
Ответить
Хотя нет, ваш пример работает, не пойму, почему у меня перекашивается.
Ответить
Хотя все, разобрался, работает. У меня свойства html, body, перекрывались, вот что значит работать целые сутки. Спасибо, помогли.
Ответить
Спасибо, помогло.
А кто знает как отцентровать div внутри другого div-а по вертикали?
Ответить