Прихожая
Шаг 1: Создаем сайт
Шаг 2: Размещаем в интернет
Шаг 3: Раскручиваем сайт
Шаг 4: Зарабатываем
Заметил ошибку? Выдели и нажми ctrl+enter

Как прижать футер(подвал) сайта к низу страницы?

Данный урок является как-бы логическим продолжением урока "блочная верстка(div верстка сайтов) " . При своем рассказе я рассчитываю на читателя(слушателя), уже ознакомленного с материалами предыдущего урока.

Итак, как Вы знаете, блочный макет сайта обычно состоит из шапки, подвала и двух или трех колонок текста. Так вот, подвал сайта(футер) , в обычном стандартном макете , при условии, что на странице мало контента, прижимается кверху, ну примерно так:

Рис.1 Стандартное положнеие футера, при малом количестве контента

Рис.1 Стандартное положнеие футера, при малом количестве контента

Хотя по логике вещей, раз это подвал, то он должен всегда находиться в нижней части экрана, независимо от того, сколько контента на странице. Т.е. вот так:

Подвал прижат к низу экрана

Рис.2 Подвал прижат к низу экрана, независимо от количества контента на странице

Так вот, именно решению вопроса "Как прижать футер к низу страницы" и посвящен данный урок.

Суть решения данного вопроса заключается в том, что подвал, он же футер, выносится за пределы общего контейнера. А на его место ставится пустой блок DIV, высота которого, в точности совпадает с высотой футера. Затем футер смещается вверх, как бы накладываясь на этот пустой блок. Смещение футера происходит с помощью отрицательного отступа сверху .

Рассмотрим общую структуру страницы. Я не буду приводить всего кода, приведу только основные правила, которые помогут понять суть, а промежуточные - упущу.

HTML код:

<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="right"</div>
<div id="content"></div>
<div id="clear"></div>
<div id="rasporka"></div>
</div>
<div id="footer"</div>

Как видите из кода, футер выносится за пределы блока контейнер, а на его место ставится пустой блок - распорка.

CSS код:

html,body {
height:100%
margin:0;
padding:0;
}
#container{
width:800px;
margin:0 auto;
min-height:100%;
}
* html #container{
height:100%;
}

#left {
width:150px;
float:left;
}
#right{
width:100px;
float:right;
}
#content{
margin-left:152px;
margin-right:102px;
}
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
#rasporka{
height:40px;
}

#footer{
height:40px;
margin-top:-40px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:800px;
}

Первым делом, задаем 100% высоту тела документа, чтобы можно было растянуть блок контейнер. Затем для блока #container задаем минимальную высоту 100% (mi-height:100%) . Однако I.E. 6.0 не понимает данное правило, поэтому для него пишем специальный хак.

* html #container{
height:100%;
}

Пустому блоку распорке (#rasporka), задаем такую же высоту, как и футеру, а сам футер, смещаем вверх, с помощью отрицательного отступа margin-top: -40px;

Вот так. Надеюсь у Вас все получится. Также, я записал видео-подсказку, в которой все пошагово подробно объясняю . Видео можно скачать, а можно посмотреть прямо с сайта. Удачи!

СМОТРЕТЬ ПОДРОБНЫЙ ВИДЕОУРОК ОНЛАЙН

Скачать видеоурок "Как прижать футер(подвал) сайта к низу страницы? "

Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ

 Создан: 2009-06-29      Просмотров: 57720      Автор:Андрей Галямов

Оцените урок:    1    2   3   4    5     

Комментарии:

Автор: Виктор
Дата : 2009-06-29

Спасибо, действительно видеоурок расставил все по полочкам.. Удачи после диплома.

Автор: valentina
Дата : 2009-06-30

Спасибо, мне это очень было надо. Отлично!

Автор: Марат
Дата : 2009-07-07

Спасибо большое!!!

Автор: Владимир
Дата : 2009-07-08

Искал в интернете как сделать правильный подвал, нашёл несколько способов, один из них осуществляется с помощью position:relative для контейнера и position:absolute для подвала, распорка тоже есть, div распорки имеет высоту больше в 2 раза чем футер, хотелось бы ещё увидеть примеры подвалов

Автор: Владимир
Дата : 2009-07-08

плюс этого метода, в том, что можно обойтись без хаков для IE

Автор: Clamp
Дата : 2009-07-09

Спасибо отличные уроки. Помогли в разработки сайта .

Автор: Юстус
Дата : 2009-08-02

Урок крайне полезный. Единственное, что хотелось бы еще выяснить - как растянуть блоки left и content на всю высоту, вне зависимости от содержимого. На этот счет в инете крайне мало информации, а та, что есть, базируется на разного рода хаках.

Автор: Юстус Юрий
Дата : 2009-08-02

Которые очень плохо соотносятся с кроссплатформенностью.

Автор: Юстус Юрий
Дата : 2009-08-02

Которые очень плохо соотносятся с кроссплатформенностью.

Автор: СветиТень
Дата : 2009-08-04

Андрей, огромное спасибо, за ваши уроки. С помощью вашего сайта освоила html и css)))

Автор: Дарья
Дата : 2009-10-13

Подскажите пожалуйста, а для чего вообще нужен подвал?

Автор: Евгений
Дата : 2009-10-16

При попытке перейти на страницу просмотра урока (http://www.zvirec.com/video_uroki/footer/index.html) ругается антивирус...

Автор: Станислав
Дата : 2009-11-03

Если высота блока "content" больше 1 экрана, фоотер остается на месте. Не работает ваш пример

Автор: rAmantiK
Дата : 2009-12-16

Юстус +1 тот же вопрос с height в блоках

Автор: Tanya
Дата : 2009-12-30

Большое спасибо за видео урок!!!! Долго искала, как прибить подвал к низу, Вы прояснили ситуацию!!!

Автор: Tanya
Дата : 2009-12-30

Попробовала добавить контента в блок "content", действительно контент наезжает на футер, если инфы больше по размеру, чем экран ((((((((, что делать???

Автор: Tanya
Дата : 2009-12-30

Сорри, все заработало, случайно вместо min-height написала просто height

Автор: мага
Дата : 2010-01-13

не работает

Автор: Ю!
Дата : 2010-01-20

А у меня стало прокручиваться верхнее меню...

Автор: Dmitry
Дата : 2010-03-02

It works! Huge thanks! -))

Автор: aha
Дата : 2010-03-04

А у меня не заработало. Хотя и min-height написано где надо, а все равно контент наезжает на футер, если инфы больше по размеру, чем экран(((

Автор: alexj
Дата : 2010-03-20

Большое спасибо! Всё работает отлично. У кого не вышло смотрите внимательней урок, особенно место где нужно зарезервировать место под футер в контейнере.

Автор: Денис
Дата : 2010-03-31

Спасибо большое, все получилось! Только возникали проблемы с запуском видио. Так и не удалось загрузить на локальный компьютер. Флеш плеер обновлял, не помогло.

Добавить комментарий:

Ваше имя:

Комментарий:

Введите сумму чисел с картинки (проверка от автороботов):

Поиск по сайту