Как прижать подвал(футер) к низу?
Воскресенье, Февраль 15, 2009 11:42 
Прижать подвал(футер) к низу экрана в IE? Хоть убейте, ну не знал я как прижать к низу. Ах да, забыл, речь идет о блочной верстке. Я пользовался таблицами, но тогда верстка теряет чистоту. Поэтому этот вариант меня не устраивал. Поиски в google ничего не принесли, только лишь не кроссбраузерные варианты.
Но нашелся человек, который сделал все правильно и кроссбраузерно. Предлагаю вам решение:
Что нам нужно:
- Футер прижат к низу не зависимо от количества контента.
- Работа во всех браузерах. По крайней мере в большинстве.
- Независимость от верстки, какая бы сложная она ни была.
Решение:
Сразу приведу код, я его закомментировал. Далее мы его разберем.
<html>
<head>
<title>Подвал к низу</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* <![CDATA[ */
* {/* обнуляем отступы */
margin: 0;
padding: 0;
}
html,body {
height: 100%; /* задаем высоту тела документа */
width:100%; /* задаем ширину тела документа */
}
.main { /* основной блок, который должен растянуться до подвала */
background: #999; /* цвет фона основного блока (для наглядности) */
min-height: 100%; /* задаем минимальную высоту основного блока с хаком для IE 6.0*/
height:auto !important;
height:100%;
}
.hFooter { /* это распорка в основном блоке - резервируем место для подвала */
height: 60px; /* высота нашего подвала */
}
.footer { /* подвал */
background: #0099CC; /* цвет фона подвала (для наглядности) */
color: #fff; /* цвет текста подвала */
height: 60px; /* высота подвала */
margin-top: -60px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */
}
/* ]]> */
</style>
</head>
<body>
<div class="main">
Это основной блок
<div class="hFooter"></div>
</div>
<div class="footer">Это подвал</div>
</body>
</html>
<head>
<title>Подвал к низу</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* <![CDATA[ */
* {/* обнуляем отступы */
margin: 0;
padding: 0;
}
html,body {
height: 100%; /* задаем высоту тела документа */
width:100%; /* задаем ширину тела документа */
}
.main { /* основной блок, который должен растянуться до подвала */
background: #999; /* цвет фона основного блока (для наглядности) */
min-height: 100%; /* задаем минимальную высоту основного блока с хаком для IE 6.0*/
height:auto !important;
height:100%;
}
.hFooter { /* это распорка в основном блоке - резервируем место для подвала */
height: 60px; /* высота нашего подвала */
}
.footer { /* подвал */
background: #0099CC; /* цвет фона подвала (для наглядности) */
color: #fff; /* цвет текста подвала */
height: 60px; /* высота подвала */
margin-top: -60px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */
}
/* ]]> */
</style>
</head>
<body>
<div class="main">
Это основной блок
<div class="hFooter"></div>
</div>
<div class="footer">Это подвал</div>
</body>
</html>
Кстати, для тех кто не понимает для чего див с классом hFooter — то он нужен для того, чтобы подвал не наезжал на контент.
Если есть вопросы по коду задавайте, с большой радостью расскажу все! =).
Вы можете следить за любыми ответы на эту запись через RSS 2.0 feed.
Вы можете оставить ответ, или trackback с Вашего собственного сайта.
Loading ...
admin сообщил:
Февраль 15th, 2009 12:04
тут еще очень хороший способ!
WebMast сообщил:
Февраль 15th, 2009 12:09
admin, тот способ имеет похожий принцип как и мой.
40a сообщил:
Февраль 15th, 2009 12:50
Не лучше ли вместо пустого
<div class="hFooter"></div>
сделать
.main {padding-bottom:40px;}
greenkaktusx сообщил:
Февраль 15th, 2009 13:32
Удобней делать фиксированную панель где-ниюудь сбоку, справа или слева.
admin сообщил:
Февраль 15th, 2009 13:41
сделал счастье
WebMast сообщил:
Февраль 15th, 2009 13:41
40a, может и удобней. При верстке одного сайта, при минимуме div'ов пришлось все сильно сокращать. Такой вариант тоже был использован =).
Vic сообщил:
Февраль 15th, 2009 15:18
что касается блочной верстки, рекомендую посетить эту страничку:
здесь 40 примеров различного расположения блоков относительно друг друга. плюс данного метода в том что html-код остается практически неизменным, меняется только css и разумеется кроссбраузерно.
lubitel3 сообщил:
Май 28th, 2009 11:45
Доброго времени суток.
Попробовал ваш код, понравилось. Только одно не получается, как вставляю в «контент» фиксированную таблицу так подвал отрывается.
Как можно это исправить? Заранее благодарен за ответ.
WebMast сообщил:
Июнь 2nd, 2009 18:08
lubitel3, напишите мне на e-mail я вам обязательно отвечу. А то в комментариях работать с кодом сильно не удобно.
Vic, спасибо ; ).
tylik сообщил:
Июнь 13th, 2009 9:27
Здраствуйте, ваш пример не корректно работает в opera. попробуйте сделать ресайз окна в ручную, если потянете вниз то футер на какое то время остается на том же месте а после нажатия F5 уходит на свое место, нет ли какого нибудь решения?
WebMast сообщил:
Июль 13th, 2009 7:59
tylik, у меня в Опера все супер ; ). Не совсем понятно что ты имеешь ввиду...
антоха сообщил:
Ноябрь 19th, 2009 10:25
Есть проблемка. Когда для html или body задана картинка в качестве фона, то она обрезается на уровне 100%, то есть на высоте окна браузера, а ниже идёт просто цветовой фон. Это происходит, конечно же, только когда контента больше, чем на одно окно.
Пример можно посмотреть:
WebMast сообщил:
Ноябрь 19th, 2009 14:29
Так сразу и не скажешь как решить вашу проблему...
ALeX сообщил:
Январь 4th, 2010 13:48
И в чем же кроссброузерность «Вашего» способа? — В Opera подвал отрывается при ресайзе за нижний край (((
WebMast сообщил:
Январь 4th, 2010 17:25
ALeX, у меня в Опера 10.10 все нормально...
redgr сообщил:
Январь 10th, 2010 19:40
Автору спасибо большое!!! я так долго искал это решение!! очень благодарен
Сергей сообщил:
Март 3rd, 2010 12:56
для меня вполне уместно было бы растянуть сам подвал, а не рабочую область, это создает необходимый эффект. Хотя при необходимости можно растягивать что угодно:
function footer(){
var main_h = parseInt($(«#main»).css('height'));
var header_h = parseInt($(«#header»).css('height'));
var footer_h = parseInt($(«#footer»).css('height'));
var bh = window.innerHeight;
var footer = bh-main_h-header_h-7;
if (footer > min-height){
$(«#footer»).height(footer+'px');
} else{
$(«#footer»).height('auto');
}
таким образом мы получаем резиновый див. Функцию надо прикрутить к wndow.onresize. наворачивать сайт целым рядом контейнеров , создвать отрицательные значения и т.п. — мне кажется лишне.
WebMast сообщил:
Март 3rd, 2010 19:52
Использование javascript тоже не всегда приемлемо : ).