Фев

Футер внизу страницы. Мытарства закончены

CSS, footer, html, IE, meta, php, бот, закон, интернет, контент, низ страницы, ремонт, сеть, скачать, файл, футер, экран

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

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

Итак, вот кроссбраузерный валидный результат, позволяющий цеплять футер в самый низ страницы.

Для начала файл html с комментариями

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
30

< !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="Content-Type" content="text/html; charset=UTF-8" />
<title>Подвал должен быть внизу</title>
<link href="main.css" rel="stylesheet" type="text/css" />


</head>

<body>

<div id="wrapper">

<div id="content">
CONTENT HERE
</div>

<div id="footer">
<div id="footer_content">
FOOTER HERE
</div>
</div>

</div>

</body>
</html>

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

А вот и CSS

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

* {margin:0; padding:0}
</p><p style="text-align: justify">html {height:100%;}</p>

<p style="text-align: justify">body {
margin:0;
padding:0;
height:100%;
}

#wrapper {
min-height:100%;
position:relative;
}

#content{padding-bottom:145px;}

#footer {
height:145px;
width:100%;
position:absolute;
bottom:0;
background: #ccc;
left:0; //без этой штуки опера отказывается опускать футер вниз
}

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

У нас лучшие – ремонт однокомнатнай квартиры справки профессионалов, все компании свадебные подарки лучшие комментарии, справки специалистов, электрические генераторы справки, справки специалистов.
Сегодня благодаря широкополосному доступу в интернет все мы можем смотреть онлайн фильмы. Лично мне по душе классика кинематографа, а вам?

6 коммент. к записи “Футер внизу страницы. Мытарства закончены”

Татьяна 24 февраля 2010 - 18:46
спасибо за замечательную статью!
Алкал 8 июля 2010 - 16:49
СПАСИБО+) ОЧЕНЬ ПОМОГЛО!
Наталья 31 июля 2010 - 11:30
Огромное человеческое спасибо! ))))))))))
Serj 9 сентября 2010 - 22:19
Да-Да! Помогло! Спасибо! В других как-то … Не так)
Alex 24 ноября 2010 - 17:10
1. Способ то бородатый. Ему уже около 4 или 5 лет. Ничего нового.

2. Мытарства остались. И связаны они с body.
2.1. background. При увеличении контента больше высоты первого экрана фон body (да и он сам) “обрывается” на тех 100%, которые были указаны относительно первого экрана. Т.е. контент выпадает из Боди.
2.2. absolute. Абсолютно спозиционированные и прижатые к низу в body блоки “зависают” на старой позиции в 100% первого экрана.
2.3. Контент же в наст. время, как правило ( в т.ч. и на широких мониторах ), ограничивается по ширине.

3. Как ни странно, но кривой ослик 6, из-за своего упрямства следовать стандартам, показывает то, что мы хотим видеть.

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

5. Лепить же многочисленные обертки-фантики вокруг блоков – это не есть оптимально.
Саня 11 декабря 2011 - 19:26
Благодарен премного

Футер внизу страницы. Мытарства закончены

6 коммент. к записи “Футер внизу страницы. Мытарства закончены”

Прокомментировать

Рубрики

Облако меток