Как прижать футер(подвал) сайта к низу страницы?
Данный урок является как-бы логическим продолжением урока "блочная верстка(div верстка сайтов) " . При своем рассказе я рассчитываю на читателя(слушателя), уже ознакомленного с материалами предыдущего урока.
Итак, как Вы знаете, блочный макет сайта обычно состоит из шапки, подвала и двух или трех колонок текста. Так вот, подвал сайта(футер) , в обычном стандартном макете , при условии, что на странице мало контента, прижимается кверху, ну примерно так:
Рис.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 Просмотров: 57767 Автор:Андрей Галямов
Комментарии: Автор: Виктор Дата : 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 Спасибо большое, все получилось! Только возникали проблемы с запуском видио. Так и не удалось загрузить на локальный компьютер. Флеш плеер обновлял, не помогло.
|