Как с помощью CSS прижать footer к низу окна браузера
Вступление Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая - как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, ...
Комментарии (161)
Есть еще вариант с отрицательными margin и футером с clear: both.
А поподробнее?
Если вкратце, то:
Работает для XHTML Strict.
Отлично, спасибо, Константин!
При удобном случае обязательно попрактикую.
А как убрать полосу прокрутки, которая все-таки появляется у IE7 и позволяет прокрутить страницу чуть-чуть ниже футера, пикселей на 5−10…
Проверяйте значения высоты и отступов. Скролл может появиться из-за них.
объясните, пожалуйста:
и непонятна вот эта запись:
* html #content {
Никитос, данный CSS-код заставляет IE версии ≤ 6 вытянуть блок
#contentна всю высоту. Это и есть хак для IE, а альтернативой ему будет такой вариант:Добрый день, Dimox. Спасибо за статью. Что-то у меня не получается победить IE7. Вышеперечисленные способы срабатывают только для IE6, Opera, FF (в остальных не проверяла). В IE7 подвал залезает на контент и находится даже не внизу экрана, а выше. В чём может быть причина, подскажите, пожалуйста! Заранее спасибо.
Юлианна, работоспособность указанных здесь способов я проверял в том числе и в ИЕ7. Не видя кода, не могу определить, в чем у вас причина. Сверьте код, который приведен в статье, со своим.
Изменил wp тему Tigopedia по второму варианту, но там внутри #text оказался сайдбар с абсолютным позиционированием и он «проваливается» сквозь футер. Можно его както удержать внутри, не переходя на относительное позиционирование?
Roland Chanishily, сложно понять проблему на словах, не видя примера.
Ну разве что картинку — сайт дома, на денвере крутится
www.chanishvili.org/err.gif — если из сайдбара убрать последний виджет — то есть высота сайдбара меньше высоты экрана — все как надо, футер прилипает к нижнемую краю, все растягивается и красиво. Кстати — большое спасибо за статью и код.
А вот если сайбар выше экрана то вот такая фигня ;(Сайдбар внутри #text
Css используется тот что у вас в статье, 2 вариант, а у сайдбара такой css
Если position cменить на relative то рушится дизайн, но все работает более-менее нормально. Можно ли както заставить #text обтягивать сайдбар?
Причина именно в том, что у сайдбара абсолютное позиционирование, поэтому нужно от него избавляться, как-то по-другому переверстывать. Не понимаю, зачем вообще здесь понадобилось асболютное.
Спасибо, переверстаем.
А вот сделал так один чайник, а теперь второй (я) переделает ;)
Прикольно :))))
Желаю удачи.
Добрый день. Для каких браузеров годны эти примеры, с какими доктайпами? А то у меня, не работает ни в опере, ни в ff…
У меня работает только пример приведенный Константином в третьем посте.
Василий, я использую XHTML 1.0 Transitional и у меня работает во всех браузерах.
Для того, чтобы не мучаться с margin-top у элементов внутри #text второго варианта, нужно указать для #text overflow: hidden.
По второму способу… для чего в #content задано position: relative;?
И без него всё прекрасно работает (IE6, IE7, FF, Opera, Safari).