Как с помощью CSS прижать footer к низу окна браузера

161 комментарий

Вступление Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая - как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, ...

Комментарии (161)

Dimox
15 лет 6 месяцев назад

Предводителев Сергей, наверное для того же, что и в первом случае.
WebMast
15 лет 4 месяца назад

Большое спасибо. Пользуюсь вторым способом, мне он больше пригянулся. И еще спасибо Константину, за его способ реализации!
Володя
15 лет 4 месяца назад

Спасибо! Очень пригодился 2-й способ!
Flash
15 лет 1 месяц назад

Хрен. не работает в IE ничего!!!
WebMast
15 лет 1 месяц назад

Почему-то у меня все работает!
Андрей
15 лет 1 месяц назад

Второй способ не работает в Opera 9.63
Mira
15 лет 1 месяц назад

Первый способ не годится для некоторых типов дизайна, где нужна колонка во весь экран по вертикали.
Второй способ не работает в Opera 9.63. Подтверждаю!
- AnTiBAnnik
  15 лет -1 месяц назад / ответ на коммент Mira
  
  В Опере 9.64 всё норм работает))
  1-й способ работает на половину, если наполнение блока content привышают видимые, т. е. появляется скрол, футер остается на месте…
  2-ой вроде всё норм пашет, проверял в ИЕ7, ФФ 3.0.8, Опере 9.64
  - AnTiBAnnik
    15 лет -1 месяц назад / ответ на коммент AnTiBAnnik
    
    Не добавляйте посты, в опере, фф, и ИЕ не работает, работает криво оба варианта ((
batia
14 лет 10 месяцев назад

IE6+, FF2+, Op9.27, Op9.52
Проверено, все работает. У меня даже с pngfix’ом все ок. Автору респект и уважуха, ха!
ЗЫ. IE8 проверить небыло возможности. так что за него неручаюсь
webrulez
14 лет 9 месяцев назад

Да, это была реальная проблема для меня когда-то, пришлось табами пришивать. Отличный пост, Респект и уважуха!!!
Glook
14 лет 9 месяцев назад

Вы кое о чём забыли упомянуть, а конкретно, о том какая проблема возникнет в IE при наличии на странице динамического содержимого, которое изменит высоту документа. О решении проблемы можете почитать в моём блоге Как правильно прижать «footer» к низу страницы в IE ;
- Dimox
  14 лет 9 месяцев назад / ответ на коммент Glook
  
  Не забыл, я не описываю то, с чем ни разу не сталкивался.
LineOfLife
14 лет 8 месяцев назад

Спасибо за публикацию.
Adan
14 лет 5 месяцев назад

Спасибо Вам большое, НИЗКИЙ ПОКЛОН!!!
Вы меня ОЧЕНЬ выручили!!!
Fortress
14 лет 4 месяца назад

Есть и другой очень простой способ расположить футер так, чтобы он всегда находился внизу, даже если содержимое не заполняет всю страницу. Предлагается кроссбраузерное решение.
Дмитрий
14 лет 2 месяца назад

Хорошая статья на мой взгляд, а как сделать так, чтобы футер всегда двигался вместе со скролом, это, тоже, css или это уже javascript?
- Dimox
  14 лет 2 месяца назад / ответ на коммент Дмитрий
  
  С помощью CSS реализуемо. Думаю, можно найти готовое решение в Интернете.
vital
14 лет 2 месяца назад

Спасибо за статью. Помогло :)
K_E_V_in
14 лет 2 месяца назад

Вот ещё вариант, работает во всех браузерах: webkev.com/2010/02/13/futer-vnizu-stranicy-mytarstva-zakoncheny/
=4@59
14 лет 1 месяц назад

Спасибо за примеры решения проблемы с подвалом, но у меня недавно возникла проблема при верстке так ее и неришил. Может кто-то встречался с таким. Суть была такая, нужно было чтоб в независимости от контента, футер всегда прижимался к низу. Решил использовать второй вариант с абсолютным позиционирование. Но проблема оказалась в том что body не ростягивается на всю высоту страницы когда есь вертикальный скроллинг, а занимает высоту содержымого. Когда скролинга нету занимает все 100% страницы как надо.
Если не все понятно вот сама верстка: www.prostosait.com.ua/portfolio/fix/
- Dimox
  14 лет 1 месяц назад / ответ на коммент =4@59
  
  Значит используйте вариант без абсолютного позиционирования.
  - =4@59
    14 лет 1 месяц назад / ответ на коммент Dimox
    
    Без абсолютного позиционирования нельзя, так как задача состоит в том чтоб когда маленькое разришения монитора вся нижняя область с газоном поднималась вверх под центральный контентный блок.
anadikt
14 лет 1 месяц назад

перечитал много сайтов где написано как с помощью CSS прижать footer к низу окна браузера, но в этой статье более удобно и качественно выражено… спасибо !!!

Татьяна

14 лет 1 месяц назад

Добавлю свой пример. Описание: Шапка, под ней 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>

Иван
14 лет 1 месяц назад

Ура! Заработало!!!
Спасибо тебе, человек с планеты Земля!
Полдня рылся в Нете и тестировал предлагаемые способы, и всегда выходил какой-нибудь косяк. А Ваш способ (№ 1, первый вариант) подошел, работает в Ослах 6−8, Опера 10, FireFox 3.6.
- Иван
  14 лет назад / ответ на коммент Иван
  
  Оказалось, что этот способ не очень хорош. Футер прилипает к низу как надо, но вываливается из основного дива. Соответственно, если фон для HTML один, а для основного дива другой, то при высоком разрешении и нехватке контента промежуток между дивом и футером будет «заливаться» цветом HTML. Это не есть гуд.

Как с помощью CSS прижать footer к низу окна браузера

Смотрите также

FireFox и вертикальное выравнивание текста в input[submit]

10 фиксов, решающих проблемы Internet Explorer 6

Верстаем кроссбраузерный «резиновый» макет страницы

Цвет курсора в поле input и кроссбраузерность

Комментарии (161)

Ваш комментарий