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

Содержание: Вступление Первый способ Второй способ Третий способ Четвертый способ Пятый способ (самый актуальный) к содержанию ↑Вступление Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать ...

Комментарии (135)
  1. 1

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

  2. 2

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

  3. 3
    Володя

    Спасибо! Очень пригодился 2-й способ!

  4. 4
    Flash

    Хрен. не работает в IE ничего!!!!

  5. 5

    Почему-то у меня все работает!

  6. 6
    Андрей

    Второй способ не работает в Opera 9.63

  7. 7
    Mira

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

    Второй способ не работает в Opera 9.63. Подтверждаю!

  8. 10
    batia

    IE6+, FF2+, Op9.27, Op9.52

    Проверено, все работает. У меня даже с pngfix’ом все ок. Автору респект и уважуха, ха!

    ЗЫ. IE8 проверить небыло возможности. так что за него неручаюсь

  9. 11
    webrulez

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

  10. 12

    Вы кое о чём забыли упомянуть, а конкретно, о том какая проблема возникнет в IE при наличии на странице динамического содержимого, которое изменит высоту документа. О решении проблемы можете почитать в моём блоге Как правильно прижать «footer» к низу страницы в IE ;

  11. 14
    LineOfLife

    Спасибо за публикацию.

  12. 15

    Спасибо Вам большое, НИЗКИЙ ПОКЛОН!!!

    Вы меня ОЧЕНЬ выручили!!!!

  13. 16

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

  14. 17
    Дмитрий

    Хорошая статья на мой взгляд, а как сделать так, чтобы футер всегда двигался вместе со скролом, это, тоже, css или это уже javascript?

  15. 19
    vital

    Спасибо за статью. Помогло :)

  16. 20

    Вот ещё вариант, работает во всех браузерах: http://webkev.com/2010/02/13/futer-vnizu-stranicy-mytarstva-zakoncheny/

  17. 21

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

  18. 24

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

  19. 25
    Татьяна

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

    Ура! Заработало!!!
    Спасибо тебе, человек с планеты Земля!
    Полдня рылся в Нете и тестировал предлагаемые способы, и всегда выходил какой-нибудь косяк. А Ваш способ (№1, первый вариант) подошел, работает в Ослах 6-8, Опера 10, FireFox 3.6.

    • 27
      Иван

      Оказалось, что этот способ не очень хорош. Футер прилипает к низу как надо, но вываливается из основного дива. Соответственно, если фон для HTML один, а для основного дива другой, то при высоком разрешении и нехватке контента промежуток между дивом и футером будет «заливаться» цветом HTML. Это не есть гуд.

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