Резиновая верстка по высоте DIV

10 января 2010

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

Трудность заключается в том, чтобы «прилепить» подвал (footer) внизу макета. С табличной версткой не у кого не возникает проблем, а вот с модной дивной люди ломают голову.

Итак, что мы имеем.

Прилепленный внизу макета footer или резиновая верстка по высоте DIV

Макет, состоящий из двух основных частей, область контента и подвал. Используемый в макете шрифт Tahoma размерностью 12 пикселей белого цвета. Обе области имеют отступы по 30 пикселей во всех направлениях. Высота подвала 100 пикселей и он имеет бордер белого цвета толщиной 1 пиксель.

Задача ясна, начинаем верстать.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
	<div class="body">Контент</div>
</div>
<div id="footer">Подвал</div>
</body>
</html>

Первая строка объявляет браузеру, какой спецификации придерживаться при формировании документа.

Четвертая в принципе не нужна, она указывает браузеру Internet Explorer 8 отображать содержимое документа как в 7 версии, практика показывает некие отклонения 8 от 7 при более масштабной верстке.

Пятая объявляет браузеру выбранную нами кодировку, в данном случае используем UTF-8. Вообще, люблю данную кодировку, кто верстал сайты на немецком или французском языках поймет.

Девятая строка подключает файл с нашими стилями.

Двенадцатая и четырнадцатая начало и конец нашей области контента.

Тринадцатая контейнер внутри области контента, ниже объясню, зачем он нужен.

Пятнадцатая область подвала.

Переходим к файлу со стилями, который мы подключили девятой строкой.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #FFF;
font: 12px/16px Tahoma, Arial, Verdana, sans-serif;
background-color: #000;
}
 
#content {
padding: 0 30px;
min-height: 100%;
}
 
* html #content {
height: 100%;
}
 
#content .body {
padding: 30px 0 130px;
}
 
#footer {
height: 39px;
margin-top: -100px;
padding: 30px;
border-top: 1px solid #FFF;
}

Вторая и третья сбрасывает внешние и внутренние отступы основного контейнера (документа).

Четвертая и пятая устанавливает размеры все того же документа.

Шестая устанавливает цвет основного шрифта используемого в документе.

Седьмая устанавливает семейство шрифта и его размерность.

Восьмая строка объявляет цвет фона документа.

Двенадцатая указывает браузеру, что в области контента отступы справа и слева 30 пикселей.

Тринадцатая строка все в той же области задает «нормальным» браузерам параметр минимальной высоты.

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

Двадцать первая делает отступ сверху 30 пикселей и снизу 130 пикселей. Этот блок получается внутренним, который не имеет высоты 100%, но достигнув максимума, будет делать отступ в 100 пикселей, который не перекроет подвал областью контента и отступ в 30 пикселей для области контента снизу.

Двадцать пятая указывает размер области подвала в 39 пикселей, так как 1 пиксель прибавится от использования бордера в двадцать восьмой строке и отступов по 30 пикселей в двадцать седьмой, что в общей сумме даст 100 пикселей.

Двадцать шестой строкой мы поднимаем область подвала на 100 пикселей конечной точки области контента, тем самым делаем наслоение, но не даем наслаиваться области контента отступом в 130 пикселей сделанным заранее.

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

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

Оставить комментарий


Апдейты

Яндекс тИЦ
25.08.2010

Google PR
03.04.2010

Яндекс выдача
02.09.2010

Курсы валют

Доллар (ЦБР)
30,6922

Евро (ЦБР)
39,3505

Погода Киров

ночь, +4...+6 °C
ясно, без осадков
утро, +8...+10 °C
малооблачно, без осадков
день, +9...+11 °C
пасмурно, без осадков
вечер, +2...+4 °C
ясно, без осадков

Облако тегов

RUCONVERT SAPE SEO WebMoney Авария Апдейт Верстка Вконтакте Дизайн Москва Отдых Правила Праздники Продвижение Проекты Реклама Сбербанк Снежинск Чай Яндекс.Вебмастер

Рубрики блога

Архив записей

Полезно почитать

Войти

Все права на материалы, размещенные на сайте, охраняются в соответствии с гражданским законодательством РФ.
Материалы не могут быть использованы без письменного разрешения владельца сайта. © 2009-2010 www.blog.khlyupin.ru
]]> ]]>