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

Жирный шрифт и курсив в html
Дата: 2012-03-01
Автор: admin

Как добавить сайт в поисковики
Дата: 2010-11-26
Автор: Олег Каминский

Кроссбраузерная верстка. Полезные советы
Дата: 2011-08-31
Автор: Олег Каминский

Как раскрутить интернет-магазин бесплатно
Дата: 2012-01-16
Автор: Олег Каминский

Как вставить видео с youtube на сайт
Дата: 2011-02-16
Автор: Олег Каминский

Как прижать футер к низу страницы



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

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

Html-код страницы следующий:

<html>
<head>
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="right"></div>
<div id="content"></div>
<div id="clear"></div>
<div id="footer">   </div>
</div>
</body>
</html>

Естественно в каждый из блоков нужно вставить текст для наглядности, но здесь я этого делать не буду, главное структура самого макета.

CSS-код таблицы стилей:

body, html {
margin:0px;
padding:0px;
text-align:center;
}
#container {
width:700px;
margin:0 auto; 
text-align:left;
}
#header{
background-color: #009933;
}
#right{
background-color:#a9d28c;
width:150px;
float:right; 
}
#content{
background-color: #006666;
margin:0px;
margin-right:152px;
}
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
#footer{
background-color: #FF3300;
}

То есть макет построен таким образом, что блоки шапки, контента, правого сайдбара и подвала сайта находятся внутри блока container. Нам нужно, чтобы даже если на странице мало текста, подвал сайта находился постоянно в самом низу.

Для реализации этой идеи нам необходимо вытащить блок подвала сайта footer за пределы блока container, а сам container растянуть на всю высоту экрана. Для этого добавляем в теге body в таблице стилей высоту 100%:

html,body {
height:100%;
margin:0;
padding:0;
}

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

#container{
width:700px;
margin:0 auto;
min-height:100%;
}

Однако свойство min-height не понимает всеми нами любимый IE6 для этого в таблице стилей пишем хак:

* html #container{
height:100%;
}

Далее поработаем над стилями самого подвала: ставим ему необходимую высоту, а также отрицательный отступ, равный высоте. Отрицательный отступ делается для того, чтобы подвал не заползал вниз за пределы экрана, ведь он находится у нас за пределами контейнера, а контейнер растянут на всю высоту. Также задаем ширину подвала и одинаковый автоматический отступ слева и справа, чтобы тот выровнялся по центру:

#footer{
background-color: #FF3300;
height:40px;
margin-top:-40px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:700px;

}

Вроде бы все уже сделано, однако если на странице будет много текста, то он будет наезжать на футер, ведь мы поставили ему отрицательный отступ. Чтобы решить эту проблему нужно в самом конце блока container поставить еще один блок, а в таблице стилей прописать ему высоту, равную высоте футера. И, поэтому, таким образом, текст будет наезжать уже не на футер, а на добавленный нами блок.

После всех изменений, а именно выноса футера за пределы контейнера и добавления дополнительного блока, Html-код выглядит следующим образом:

<html>
<head>
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="right"></div>
<div id="content"></div>
<div id="clear"></div>
</div>
<div id="footer">   </div>
<div id="footerempty "></div>

</body>
</html>

footerempty– это добавленный нами пустой блок, который так и должен всегда оставаться пустым и прозрачным и служить для того, чтобы на него наезжая лишний текст.

Таблица стилей со всеми изменениями имеет следующий вид:

body, html {
margin:0px;
padding:0px;
text-align:center;
height:100%;
}
* html #container{
height:100%;
}

#container {
width:700px;
margin:0 auto; 
text-align:left;
min-height:100%;
}
#header{
background-color: #009933;
}
#right{
background-color:#a9d28c;
width:150px;
float:right; 
}
#content{
background-color: #006666;
margin:0px;
margin-right:152px;
}
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
# footerempty {
height:50px;
}

#footer{
background-color: #FF3300;
height:50px;
margin-top:-50px;

margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:700px;

}

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



Поделитесь статьёй с друзьями:


Автор: Олег Каминский| Дата: 2011-01-19| Просмотров:(12943)| Комментов:(2)



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

Автор: Виктор
Дата: (2012-09-13)

Очень много и долго читал всякие рассказы о том как прилепить подвал к низу, слава богу на этот сайт вошел. Конечно желаемого эфекта я не добился но большое спасибо за объяснение что, куда и к чему. Не получилось у меня сделать то что хотел скорее всего потому что я в таблице стилей что-то где-то не правильно прописал ну а в общем благодаря вам я понял как ставить правильно футор.

Автор: wind
Дата: (2012-01-22)

Спасибо большое, помогло. Промучался с футерами 3 часа, пока не прочел вас. Легко и доступно пишете. Удачи.

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

Введите сумму чисел с картинки: