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

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

Комментарии (136)
  1. 1
    Константин А.
    @

    Есть еще вариант с отрицательными margin и футером с clear:both.

  2. 3
    Константин А.
    @

    Если вкратце, то:

    <div id="global">
     <div id="globalcont">
     </div>
    </div>
    <div id="footer"></div>
    
    html, body {margin:0; padding:0; height:100%}
    #global {margin-top:-62px; min-height:100%}
    #globalcont {padding-top:62px}
    #footer {height:62px; clear:both}
    

    Работает для XHTML Strict.

  3. 4

    Отлично, спасибо, Константин!
    При удобном случае обязательно попрактикую.

  4. 5
    mono
    @

    А как убрать полосу прокрутки, которая все таки появляется у IE7 и позволяет прокрутить страницу чуть-чуть ниже футера, пикселей на 5-10?…

  5. 6

    Проверяйте значения высоты и отступов. Скролл может появиться из-за них.

  6. 7
    Никитос
    @

    объясните, пожалуйста:

    Ну и аналогично, взамен хаку для IE, можно использовать альтернативную запись с параметрами высоты.

    и непонятна вот эта запись:


    * html #content {

  7. 8

    Никитос, данный CSS-код заставляет IE версии < = 6 вытянуть блок #content на всю высоту. Это и есть хак для IE, а альтернативой ему будет такой вариант:

    #content {
     height: auto !important;
     height: 100%;
     min-height: 100%;
    }
    
  8. 9
    Юлианна
    @

    Добрый день, Dimox. Спасибо за статью. Что-то у меня не получается победить IE7. Вышеперечисленные способы срабатывают только для IE6, Opera, FF(в остальных не проверяла). В IE7 подвал залезает на контент и находится даже не внизу экрана, а выше. В чём может быть причина, подскажите, пожалуйста! Заранее спасибо.

  9. 10

    Юлианна, работоспособность указанных здесь способов я проверял в том числе и в ИЕ7. Не видя кода, не могу определить, в чем у вас причина. Сверьте код, который приведен в статье, со своим.

  10. 11

    Изменил wp тему Tigopedia по второму варианту, но там внутри #text оказался сайдбар с абсолютным позиционированием и он «проваливается» сквозь футер. Можно его както удержать внутри, не переходя на относительное позиционирование?

  11. 12

    Roland Chanishily, сложно понять проблему на словах, не видя примера.

  12. 13

    Ну разве что картинку — сайт дома, на денвере крутится
    http://www.chanishvili.org/err.gif — если из сайдбара убрать последний виджет — то есть высота сайдбара меньше высоты экрана — все как надо, футер прилипает к нижнемую краю, все растягивается и красиво. Кстати — большое спасибо за статью и код.
    А вот если сайбар выше экрана то вот такая фигня ;( Сайдбар внутри #text

    Css используется тот что у вас в статье, 2 вариант, а у сайдбара такой css

     .right-sidebar {
    	 margin:5px 0 0 0 !important;
    	 margin:0;
    	 position:absolute;
    	 overflow:hidden;
    	 }

    Если position cменить на relative то рушится дизайн но все работает более-менее нормально. Можно ли както заставить #text обтягивать сайдбар?

  13. 14

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

  14. 15

    Спасибо, переверстаем.
    А вот сделал так один чайник, а теперь второй (я) переделает ;)

  15. 16

    А вот сделал так один чайник, а теперь второй (я) переделает ;)

    Прикольно :))))

    Желаю удачи.

  16. 17
    Василий

    Добрый день. Для каких браузеров годны эти примеры, с какими доктайпами? А то у меня, не работает ни в опере, ни в ff…
    У меня работает только пример приведенный Константином в третьем посте.

  17. 18

    Василий, я использую XHTML 1.0 Transitional и у меня работает во всех браузерах.

  18. 19

    Для того, чтобы не мучаться с margin-top у элементов внутри #text второго варианта, нужно указать для #text overflow: hidden.

  19. 20
    Предводителев Сергей
    @

    По второму способу… для чего в #content задано position: relative;?
    И без него всё прекрасно работает (IE6, IE7, FF, Opera, Safari).

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