Главная > Дизайн > CSS > Прижимаем footer (подвал/футер) к низу экрана

Прижимаем footer (подвал/футер) к низу экрана

2.03.2010. CSS, HTML, Дизайн

4

Достаточно часто при дизайне сайта появляется необходимость прижать футер к низу экрана. Есть множество способов это реализовать, вот один из них:

Вот наш HTML-файл. Футер в нем должен быть выненес за пределы основного содержимого.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
</link></head>
<body>
<div id="content">
Контент
</div>
<div id="clear"></div>
<div id="footer">
Ну а это наш подвал
</div>
</body>
</html>

Нам нужно загнать подвал вниз экрана. Напишем CSS для этой страницы:

html,body
{
margin:0;
padding:0;
color:#000;
background:#fff;
height:100%;
}
 
#content
{
position:relative;
margin:0 auto;
width:980px;
min-height: 100%;
height: auto !important; 
height: 100%;
background:#999;
margin-bottom:-50px;
}
 
 
.clear
{
clear:both;
}
 
#footer
{
background:red;
width:980px;
position:relative;
margin:0 auto;
height:50px;
}

Что мы здесь сделали?
Все очень просто. Мы задали высоту страницы без подвала равной 100% (это все, что находится в блоке с id=content). Затем мы сдвинули весь блок на 50px вверх, чтобы освободить место под подвал. После этого мы установили высоту подвала равной 50px. Теперь подвал будет прижат к нижнему краю, а до него будет растягиваться блок с контентом, в том числе и фон.
Вот и все. Подвал прижат к футеру. Как-нибудь потом напишу еще пару вариантов прижатия футера к подвалу.




Похожие записи:


Метки:

Rambler's Top100 Блогун - монетизируем блоги