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

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

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

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

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

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" />
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
< ![endif]-->

</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>

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

А вот и

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; //без этой штуки опера отказывается опускать футер вниз
}

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

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

  1. Татьяна Says:

    спасибо за замечательную статью!

  2. Алкал Says:

    СПАСИБО+) ОЧЕНЬ ПОМОГЛО!

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

XHTML: Можете использовать теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я ЧЕЛОВЕК!!!!.

Наталья Подольская шаблоны wordpress Энциклопедия животного мира. Фото и статьи. Заказать свадебный макияж в Минске, пробный макияж бесплатно!