Как с помощью CSS прижать footer к низу окна браузера
Вступление Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая - как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, ...
Комментарии (161)
Предводителев Сергей, наверное для того же, что и в первом случае.
Большое спасибо. Пользуюсь вторым способом, мне он больше пригянулся.. И еще спасибо Константину, за его способ реализации!
Спасибо! Очень пригодился 2-й способ!
Хрен. не работает в IE ничего!!!!
Почему-то у меня все работает!
Второй способ не работает в Opera 9.63
Первый способ не годится для некоторых типов дизайна, где нужна колонка во весь экран по вертикали.
Второй способ не работает в Opera 9.63. Подтверждаю!
В Опере 9.64 всё норм работает ))
1-й способ работает на половину, если наполнение блока content привышают видимые, т.е. появляется скрол, футер остается на месте…
2-ой вроде всё норм пашет, проверял в ИЕ7, ФФ 3.0.8, Опере 9.64
Не добавляйте посты, в опере, фф, и ИЕ не работает, работает криво оба варианта ((
IE6+, FF2+, Op9.27, Op9.52
Проверено, все работает. У меня даже с pngfix’ом все ок. Автору респект и уважуха, ха!
ЗЫ. IE8 проверить небыло возможности. так что за него неручаюсь
Да, это была реальная проблема для меня когда-то, пришлось табами пришивать. Отличный пост, Респект и уважуха!!!
Вы кое о чём забыли упомянуть, а конкретно, о том какая проблема возникнет в IE при наличии на странице динамического содержимого, которое изменит высоту документа. О решении проблемы можете почитать в моём блоге Как правильно прижать «footer» к низу страницы в IE ;
Не забыл, я не описываю то, с чем ни разу не сталкивался.
Спасибо за публикацию.
Спасибо Вам большое, НИЗКИЙ ПОКЛОН!!!
Вы меня ОЧЕНЬ выручили!!!!
Есть и другой очень простой способ расположить футер так, чтобы он всегда находился внизу, даже если содержимое не заполняет всю страницу. Предлагается кроссбраузерное решение.
Хорошая статья на мой взгляд, а как сделать так, чтобы футер всегда двигался вместе со скролом, это, тоже, css или это уже javascript?
С помощью CSS реализуемо. Думаю, можно найти готовое решение в Интернете.
Спасибо за статью. Помогло :)
Вот ещё вариант, работает во всех браузерах: http://webkev.com/2010/02/13/futer-vnizu-stranicy-mytarstva-zakoncheny/
Спасибо за примеры решения проблемы с подвалом, но у меня недавно возникла проблема при верстке так ее и неришил. Может кто-то встречался с таким. Суть была такая, нужно было чтоб в независимости от контента, футер всегда прижимался к низу. Решил использовать второй вариант с абсолютным позиционирование. Но проблема оказалась в том что body не ростягивается на всю высоту страницы когда есь вертикальный скроллинг, а занимает высоту содержымого . Когда скролинга нету занимает все 100% страницы как надо.
Если не все понятно вот сама верстка: http://www.prostosait.com.ua/portfolio/fix/
Значит используйте вариант без абсолютного позиционирования.
Без абсолютного позиционирования нельзя ,так как задача состоит в том чтоб когда маленькое разришения монитора вся нижняя область с газоном поднималась вверх под центральный контентный блок.
перечитал много сайтов где написано как с помощью CSS прижать footer к низу окна браузера, но в этой статье более удобно и качественно выражено… спасибо !!!
Добавлю свой пример. Описание: Шапка, под ней 3 столбца, и внизу прижатый footer; проверялось на последних версиях мозилы, експлоера, гугл хром и оперы, все работает :) Надеюсь мой пример кому нибудь поможет
за основу моего примера брался вот этот код , за что его автору огромнейшее спасибо
css
html
Ура! Заработало!!!
Спасибо тебе, человек с планеты Земля!
Полдня рылся в Нете и тестировал предлагаемые способы, и всегда выходил какой-нибудь косяк. А Ваш способ (№1, первый вариант) подошел, работает в Ослах 6-8, Опера 10, FireFox 3.6.
Оказалось, что этот способ не очень хорош. Футер прилипает к низу как надо, но вываливается из основного дива. Соответственно, если фон для HTML один, а для основного дива другой, то при высоком разрешении и нехватке контента промежуток между дивом и футером будет “заливаться” цветом HTML. Это не есть гуд.