Содержание: Вступление Первый способ Второй способ Третий способ Четвертый способ Пятый способ (самый актуальный) Вступление Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать подвал сайта ...
Большое спасибо. Пользуюсь вторым способом, мне он больше пригянулся.. И еще спасибо Константину, за его способ реализации!
Спасибо! Очень пригодился 2-й способ!
Хрен. не работает в IE ничего!!!!
Почему-то у меня все работает!
Второй способ не работает в Opera 9.63
Первый способ не годится для некоторых типов дизайна, где нужна колонка во весь экран по вертикали.
Второй способ не работает в Opera 9.63. Подтверждаю!
В Опере 9.64 всё норм работает ))
1-й способ работает на половину, если наполнение блока content привышают видимые, т.е. появляется скрол, футер остается на месте…
2-ой вроде всё норм пашет, проверял в ИЕ7, ФФ 3.0.8, Опере 9.64
Не добавляйте посты, в опере, фф, и ИЕ не работает, работает криво оба варианта ((
IE6+, FF2+, Op9.27, Op9.52
Проверено, все работает. У меня даже с pngfix’ом все ок. Автору респект и уважуха, ха!
ЗЫ. IE8 проверить небыло возможности. так что за него неручаюсь
Да, это была реальная проблема для меня когда-то, пришлось табами пришивать. Отличный пост, Респект и уважуха!!!
Вы кое о чём забыли упомянуть, а конкретно, о том какая проблема возникнет в IE при наличии на странице динамического содержимого, которое изменит высоту документа. О решении проблемы можете почитать в моём блоге Как правильно прижать «footer» к низу страницы в IE ;
Не забыл, я не описываю то, с чем ни разу не сталкивался.
Спасибо за публикацию.
Спасибо Вам большое, НИЗКИЙ ПОКЛОН!!!
Вы меня ОЧЕНЬ выручили!!!!
Есть и другой очень простой способ расположить футер так, чтобы он всегда находился внизу, даже если содержимое не заполняет всю страницу. Предлагается кроссбраузерное решение.
Хорошая статья на мой взгляд, а как сделать так, чтобы футер всегда двигался вместе со скролом, это, тоже, css или это уже javascript?
С помощью CSS реализуемо. Думаю, можно найти готовое решение в Интернете.
Спасибо за статью. Помогло :)
Вот ещё вариант, работает во всех браузерах: http://webkev.com/2010/02/13/futer-vnizu-stranicy-mytarstva-zakoncheny/
Спасибо за примеры решения проблемы с подвалом, но у меня недавно возникла проблема при верстке так ее и неришил. Может кто-то встречался с таким. Суть была такая, нужно было чтоб в независимости от контента, футер всегда прижимался к низу. Решил использовать второй вариант с абсолютным позиционирование. Но проблема оказалась в том что body не ростягивается на всю высоту страницы когда есь вертикальный скроллинг, а занимает высоту содержымого . Когда скролинга нету занимает все 100% страницы как надо.
Если не все понятно вот сама верстка: http://www.prostosait.com.ua/portfolio/fix/
Значит используйте вариант без абсолютного позиционирования.
Без абсолютного позиционирования нельзя ,так как задача состоит в том чтоб когда маленькое разришения монитора вся нижняя область с газоном поднималась вверх под центральный контентный блок.
перечитал много сайтов где написано как с помощью CSS прижать footer к низу окна браузера, но в этой статье более удобно и качественно выражено… спасибо !!!
Добавлю свой пример. Описание: Шапка, под ней 3 столбца, и внизу прижатый footer; проверялось на последних версиях мозилы, експлоера, гугл хром и оперы, все работает :) Надеюсь мой пример кому нибудь поможет
за основу моего примера брался вот этот код , за что его автору огромнейшее спасибо
css
html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
top:0;
left:0;
width: 100%;
height:60px;
background:#CCC;}
#content {
padding-bottom:60px;
min-height:60px;}
#left {
float: left;
width: 25%;
background-color: #99F;}
#center {
float: left;
width: 50%;
background-color: #9F9;}
#right {
float: left;
width: 25%;
background-color: #99F;}
#clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#footer {
height:60px;
width:100%;
position:absolute;
bottom:0;
left:0;
background:#CCC;}
html
<!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]> #wrapper {height:100%;} <![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header"> HEADER HERE</div>
<div id="content">
<div id="left"> LEFT </div>
<div id="center"> CENTER <br/>text<br/>text<br/>text<br/></div>
<div id="right"> RIGHT </div>
<br id="clearfloat" />
</div>
<div id="footer">
<div id="footer_content">
FOOTER HERE
</div>
</div>
</div>
</body>
</html>
Ура! Заработало!!!
Спасибо тебе, человек с планеты Земля!
Полдня рылся в Нете и тестировал предлагаемые способы, и всегда выходил какой-нибудь косяк. А Ваш способ (№1, первый вариант) подошел, работает в Ослах 6-8, Опера 10, FireFox 3.6.
Оказалось, что этот способ не очень хорош. Футер прилипает к низу как надо, но вываливается из основного дива. Соответственно, если фон для HTML один, а для основного дива другой, то при высоком разрешении и нехватке контента промежуток между дивом и футером будет «заливаться» цветом HTML. Это не есть гуд.