Главная CSS-верстка

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

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

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

  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.

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

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

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

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

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

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

    * html #content {

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

    #content {
      height: auto !important;
      height: 100%;
      min-height: 100%;
    }
    
  9. Добрый день, Dimox. Спасибо за статью. Что-то у меня не получается победить IE7. Вышеперечисленные способы срабатывают только для IE6, Opera, FF (в остальных не проверяла). В IE7 подвал залезает на контент и находится даже не внизу экрана, а выше. В чём может быть причина, подскажите, пожалуйста! Заранее спасибо.

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

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

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

  13. Ну разве что картинку — сайт дома, на денвере крутится
    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 обтягивать сайдбар?

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

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

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

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

    Желаю удачи.

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

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

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

  20. Предводителев Сергей
    15 лет 6 месяцев назад

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

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