|
Зачем нужно прижать футер (footer, подвал) к нижней части экрана браузера
Сегодня мы попробуем решить одну небольшую проблему, которая может возникнуть с созданным нами ранее макетом сайта. Чаще всего такая ситуация возникает при просмотре макета сайта на больших мониторах (с высоким разрешением) при отображении страницы с малым количеством информации. В этом случае может получиться так, что футер не будет прижат к низу экрана, а будет располагаться чуть ли не на середине экрана по высоте, что в большинстве случаев будет выглядеть некрасиво и не эстетично.
Все же, по моему мнению, прижать футер к самому низу макета сайта нужно и особенно это будет актуально в случае, когда высота страницы получиться меньше, чем высота экрана пользователя. С учетом этого случая, нужно будет в макете сайта на основе блочной верстки обязательно прижать футер к низу экрана. Схематично это можно представить так:
Т.е. правильное поведение футера в макете сайта на основе блочной верстки для случая малого количества информации на странице и большого экрана пользователя, будет следующим:
Приведенный в качестве примера сайта, футер прижат к низу экрана, а не располагается сразу же после текста страницы в макете. Что бы заставить футер прижаться к низу макета на блочной верстке, нужно будет осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и внесем изменения в файл Index.html, содержащий Html код и формирующий Div контейнеры нашего макета сайта. Но обо всем по порядку.
Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом файл Index.html трехколоночного макета на основе блочной верстки содержал следующий Html код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (Div верстки)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка Меню Меню Меню Меню</div>
<div id="right">Правая колонка Меню Меню Меню Меню</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div id="footer">Подвал</div>
</div>
</body>
</html>
|
А в файле Style.css трехколоночного макета сайта на основе блочной Div верстки были прописаны следующие CSS свойства:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
|
Созданный на основе блочной верстки трехколоночный макет сайта будет выглядеть примерно так:
Как видите, футер не прижат к низу макета и, следовательно, не удовлетворяет нашим требованиям (он располагается всегда под самой нижней колонкой), поэтому придется внести коррективы в код нашего трехколоночного макета на блочной верстке. Все тоже самое можно будет проделать и для двухколоночного макета и для резинового макета сайта тоже. Метод универсальный.
Как прижать футер к низу макета сайта на основе блочной верстки
Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала нам потребуется задать высоту всей страницы макета на основе блочной верстки равную ста процентам (страница будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер Div контейнера с макетом нашего сайта тоже до 100%. Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно будет в файле Style.css дописать для тега Body еще одно CSS свойство, задающее высоту страницы макета равной 100%:
|
1
2
3
4
5
|
body, html {
margin:0px;
padding:0px;
height: 100%;
}
|
На внешнем виде нашего макета это никак пока не отразится, но зато теперь этот макет на основе блочной верстки сможет растянуться на всю высоту экрана, т.к. сейчас содержимое тегов Body будет занимать всю высоту окна браузера (экрана). Т.е. это был своеобразный подготовительный этап. Основные свойства CSS, при желании, вы можете посмотреть на этой странице. Теперь зададим для Div контейнера, в котором заключен макет сайта на блочной верстке, минимальную высоту равную 100%:
|
1
2
3
4
5
|
#maket {
width:300px;
margin:0 auto;
min-height: 100%;
}
|
Еще я хочу подсветить Div контейнер содержащий макет нашего сайта (div контейнер с id="maket"). Для этого я задам ему рамку с помощью соответствующего CSS свойства Border:
|
1
2
3
4
5
6
|
#maket {
width:300px;
margin:0 auto;
min-height: 100%;
border: solid 3px black;
}
|
CSS свойствоborder: solid 3px black позволяет задать для данного Div контейнера (включающего весь наш макет сайта на блочной верстке) сплошную рамку (solid) толщиной в 3 пикселя черного цвета (основные свойства CSS, при желании, вы можете посмотреть на этой странице). Это позволит нам наглядно увидеть, что Div контейнер с макетом нашего сайта действительно растянулся на всю высоту экрана, при малом количестве информации на странице:
Теперь нам нужно будет вынести Div контейнер футера из общего контейнера с макетом сайта на блочной верстке и разместить его ниже, сразу же после общего Div контейнера макета. Что это нам даст? А то, что , наконец-то, соизволит опуститься вниз футер в макете, а не будет, как прежде, прижиматься к наиболее длинной колонке макета. В этом случае Html код файла Index.html примет следующий вид:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (Div верстки)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка Меню Меню Меню Меню</div>
<div id="right">Правая колонка Меню Меню Меню Меню</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое </div>
</div>
<div id="footer">Подвал</div>
</body>
</html>
|
Обратите внимание, Div-контейнер с футером теперь не находится внутри общего Div контейнера с макетом сайта (maket), а следовательно ширина футера теперь уже не регулируется CSS свойствами, заданными для общего контейнера макета на основе блочной верстки в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным Div контейнером с макетом сайта:
Но опять возникает проблема, ибо для того чтобы увидеть футер (подвал), теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки). Получается это потому, что основной Div контейнер с макетом сайта на основе блочной верстки (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а Div контейнер футера располагается сразу за основным Div контейнером и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.
Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером, для того, чтобы футер (подвал) сместился вверх, на высоту, равную высоте Div контейнера с самим футером. При этом контейнер с футером наедет на основной Div контейнер с макетом нашего сайта на основе блочной верстки и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для просмотра футера). Но для того чтобы задать отрицательный отступ вверх на высоту футера, нужно знать эту самую высоту Div контейнера с футером, а мы ее пока что не знаем.
Поэтому сначала зададим Div контейнеру, содержащему футер (подвал), высоту, прописав соответствующее CSS свойство в файле Style.css для Div контейнера Footer:
|
1
2
3
4
5
|
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
}
|
А затем задаем для Div контейнера футера в файле Style.css отрицательный отступ сверху на высоту равную высоте футера:
|
1
2
3
4
5
6
|
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
}
|
Это позволит Div контейнеру, содержащему футер, подняться вверх ровно на высоту самого же футера и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для Div контейнера maket, чтобы толщина рамки не мешала всему нашему макету на основе блочной верстки вместе с футером поместиться в экране по высоте):
Как видите, теперь полоса прокрутки в браузере не появляется и весь наш трехколоночный макет сайта на основе блочной верстки помещается в одном экране (в случае малого количества информации на странице) и имеет футер, расположенный в самом низу. Что нам, собственно, и требовалось сделать.
Но возникает проблема, которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:
Получается, что может возникнуть ситуация, когда информация в одной из колонок макета наедет на футер, что будет выглядеть не красиво. Происходит это из-за пресловутого отрицательного отступа, который мы задали для футера и который помог поднять наш подвал с наездом на основной Div контейнер макета. Т.е. получается, что внизу экрана расположены два Div контейнера, перекрывающие друг друга в области футера. Именно поэтому информация в этой области макета на блочной верстке может отображаться так коряво.
Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался Div контейнер с футером. Задав для этого нового Div контейнера высоту равную высоте футера, мы сможем избежать наезда информации из основного контейнера на Div контейнер с футером. Присвоим этому контейнеру ID с названием Rasporka и в результате Html код файла Index.html нашего трехколоночного макета на блочной верстке примет вид:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (Div верстки)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка Меню Меню Меню Меню</div>
<div id="right">Правая колонка Меню Меню Меню Меню</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы</div>
<div id="rasporka"></div>
</div>
<div id="footer">Подвал</div>
</body>
</html>
|
А в файле Style.css пропишем для ID этого Div контейнера свойство Height, задающее высоту этому Div контейнеру-распорке равную высоте футера:
|
1
2
3
|
#rasporka {
height: 50px;
}
|
В результате Div контейнер с футером будет наезжать снизу не на информацию, содержащуюся в основном контейнере (например, текст в самой высокой колонке), а на равную футеру по высоте область с контейнером-распоркой, не содержащим никакой информации. Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете сайта на основе блочной верстки. Все будет четко и красиво:
Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно для Div контейнера с футером (footer), т.к. этот контейнер с футером теперь не входит в состав основного Div контейнера макета сайта (maket). Для этого нужно добавить в CSS файл стилевого оформления макета Style.css дополнительные свойства для Div контейнера Footer, позволяющие задать ширину футера и выровнять его посередине экрана по ширине. Ширину футера имеет смысл задать равной ширине нашего трехколоночного макета сайта с помощью свойства Width, а выравнивание футера по ширине экрана можно осуществить таким же способом, как мы это сделали для всего макета на блочной верстке. Таким образом, нам нужно будет добавить для ID Footer дополнительные CSS свойства:
|
1
2
3
4
5
6
7
8
9
|
#footer{
background-color:#FFC0FF;
clear:both;
height: 20px;
margin-top:-20px;
width:800px;
margin-left: auto;
margin-right: auto;
}
|
С помощью CSS свойства width:800px задается ширина футера равная 800 пикселей, а с помощью двух CSS свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от Div контейнера с футером автоматически, в результате чего эти отступы будут равными и футер выровняется по середине:
Ну вот, вроде и все, больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и возможно в каких-то других старых браузерах тоже) не смотря на все наши старания, футер не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.
Все это происходит из-за того, что браузер Internet Explorer 6 не понимает CSS свойство min-height: 100%, которое мы использовали для задания минимальной высоты Div контейнера с макетом сайта, равной высоте экрана. Поэтому, для решения этой проблемы, нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для Div контейнера с макетом сайта (maket) нужно будет вставить следующую комбинацию CSS свойств:
|
1
2
3
|
* html #maket {
height: 100%;
}
|
Это CSS правило будет применено только для браузера Internet Explorer 6, остальные браузеры не будут его учитывать и выполнять те свойства CSS для основного контейнера макета сайта (maket), которые будут описаны следом. Итак, окончательный вид файла Style.css для трехколоночного макета сайта, построенного на основе блочной верстки с прижатым к низу экрана футером, будет следующим:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
body, html {
margin:0px;
padding:0px;
height: 100%;
}
* html #maket {
height: 100%;
}
#maket {
width:800px;
margin:0 auto;
min-height: 100%;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;
}
#rasporka {
height: 50px;
}
|
Ну, а окончательный вид файла Index.html трехколоночного макета сайта построенного на основе блочной верстки с прижатым к низу экрана футером, был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.
|