Как прижать footer к низу браузера

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

Способ 1

При белом фоне контента Вы получите следующую композицию web-страницы.

HTML-код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<title>Название web-страницы</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">Шапка</div>
<div class="content">Контент</div>
<div class="footer">Футер</div>

</body>
</html>

Таблица стилей style.css

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

body {
min-height:100%;
height: auto !important;
height: 100%;
position: relative; }

.header {
height: 50px;
width: 100%;
background-color:#FFE4E1;
}

.content {
padding-bottom:100px;
}

.footer {
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
background-color:#7FFFD4;
}

Недостаток метода в том, что фон контента должен быть белым. В противном случае, футер будет прижат, но цветной блок контента все равно будет не на всю высоту экрана.

Способ 2

Вот еще один способ для трехколоночного макета.

HTML-код

<!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_2.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="page">

<div id="header">Шапка </div>

<div id="left">Левая колонка <br>Меню <br>Пункт 1 <br>Пункт 2 <br>Пункт 3 <br>Пункт 4</div>

<div id="right">Правая колонка <br>Новость 1<br>Новость 2 <br>Новость 3 <br>Новость 4</div>

<div id="content">Содержимое страницы <br>Содержимое страницы <br>Содержимое страницы <br>Содержимое страницы <br>Содержимое страницы <br>Содержимое страницы <br>Содержимое страницы<br>Содержимое страницы<br>Содержимое страницы<br>Содержимое страницы<br>Содержимое страницы</div>
</div>

<div id="footer">Подвал</div>

</body>
</html>

Таблица стилей style_2.css

body, html {
height: 100%;
padding:0px;
margin:0px;
background-color:#FFF;
}

* html #page {
height:100%;
}

#page {
width:800px;
margin:0 auto;
min-height:100%;
}

#header{
background-color:#FFDEAD;
height:100px;
}

#left{
width:150px;
background-color:#E6E6FA;
float:left;
}

#right{
width:150px;
background-color:#E6E6FA;
float:right;
}

#content{
margin-left:152px;
margin-right:152px;
background-color:#FFF8DC; }

#footer{
width:800px;
margin-left:auto;
margin-right:auto;
height: 100px;
margin-top:-100px;
background-color:#FFEC8B;
clear:both;
}

Способ 3

Используя нижеприведенные коды, Вы получите web-страницу, как на рисунке ниже. Все высоты блоков задаются в процентах от высоты экрана.

Недостаток в том, что работает только без использования (т.е. в отсутствии) !DOCTYPE, что совсем не хорошо, но в некоторых случаях можно использовать.

HTML-код

<html>
<head>
<title>Блочный сайт</title>
<link rel="stylesheet" href="style_3.css" type="text/css">
<head>
<body>

<div class=container>
<div class=title>Заголовок и логотип</div>
<div class=menu>Меню сайта</div>
<div class=left>Левая колонка. Левая колонка. Левая колонка. Левая колонка. Левая колонка.</div>
<div class=content> <p>Основная колонка. Основная колонка.Основная колонка. Основная колонка. Основная колонка. Основная колонка.Основная колонка. Основная колонка. Основная колонка. Основная колонка.Основная колонка. Основная колонка.
</div>
<div class=menu>Меню сайта</div>
<div class=bottom>Подвал</div>
</div>

</body>
</html>

Таблица стилей style_3.css

body{width:670px; margin: 0px auto; background:#FFE4E1}
.container{width: 670px; background: white; height:100%}
.title {background: #06DFE1; height:10%}
.menu {background: #A7FBC0; height:5%;clear:both;}
.left{float:left; background: white; width: 220px; height:75%}
.content{float:right; background: #FFF2A6; width: 450px; height:75%}
.bottom{background: #E5E5E5; height:5%}