Главная » Создание сайтов » Верстка » Как прижать подвал(футер) к низу?

Как прижать подвал(футер) к низу?

homepage_footer

Прижать подвал(футер) к низу экрана в IE? Хоть убейте, ну не знал я как прижать к низу. Ах да, забыл, речь идет о блочной верстке. Я пользовался таблицами, но тогда верстка теряет чистоту. Поэтому этот вариант меня не устраивал. Поиски в google ничего не принесли, только лишь не кроссбраузерные варианты.

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

Что нам нужно:

  • Футер прижат к низу не зависимо от количества контента.
  • Работа во всех браузерах. По крайней мере в большинстве.
  • Независимость от верстки, какая бы сложная она ни была.

Решение:

Сразу приведу код, я его закомментировал. Далее мы его разберем.
<html>
<head>
<title>Подвал к низу</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* <![CDATA[ */
* {/* обнуляем отступы */
margin: 0;
padding: 0;
}
html,body {
height: 100%; /* задаем высоту тела документа */
width:100%; /* задаем ширину тела документа */
}
.main { /* основной блок, который должен растянуться до подвала */
background: #999; /* цвет фона основного блока (для наглядности) */
min-height: 100%; /* задаем минимальную высоту основного блока с хаком для IE 6.0*/
height:auto !important;
height:100%;
}
.hFooter { /* это распорка в основном блоке - резервируем место для подвала */
height: 60px; /* высота нашего подвала */
}
.footer { /* подвал */
background: #0099CC; /* цвет фона подвала (для наглядности) */
color: #fff; /* цвет текста подвала */
height: 60px; /* высота подвала */
margin-top: -60px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */
}
/* ]]> */
</style>
</head>
<body>
<div class="main">
Это основной блок
<div class="hFooter"></div>
</div>
<div class="footer">Это подвал</div>
</body>
</html>

Кстати, для тех кто не понимает для чего див с классом hFooter — то он нужен для того, чтобы подвал не наезжал на контент.

Если есть вопросы по коду задавайте, с большой радостью расскажу все! =). С уважением, Vasilenko Ivan!

Комментарии — 28 комментариев

  1. #400 admin в 12:04, 15 февраля 2009:

    Ответить | Цитировать

    тут ryanfait.com/resources/fo... -bottom-of-page/ еще очень хороший способ!

  2. #401 WebMast в 12:09, 15 февраля 2009: (подписался)

    Ответить | Цитировать

    admin, тот способ имеет похожий принцип как и мой.

  3. #402 40a в 12:50, 15 февраля 2009:

    Ответить | Цитировать

    Не лучше ли вместо пустого

    <div class="hFooter"></div>

    сделать

    .main {padding-bottom:40px;}

  4. #407 greenkaktusx в 13:32, 15 февраля 2009: (подписался)

    Ответить | Цитировать

    Удобней делать фиксированную панель где-ниюудь сбоку, справа или слева. :-)

  5. #413 admin в 13:41, 15 февраля 2009:

    Ответить | Цитировать

    сделал счастье ;-)

  6. #414 WebMast в 13:41, 15 февраля 2009: (подписался)

    Ответить | Цитировать

    40a, может и удобней. При верстке одного сайта, при минимуме div'ов пришлось все сильно сокращать. Такой вариант тоже был использован =).

  7. #417 Vic в 15:18, 15 февраля 2009:

    Ответить | Цитировать

    что касается блочной верстки, рекомендую посетить эту страничку:

    blog.html.it/layoutgala/

    здесь 40 примеров различного расположения блоков относительно друг друга. плюс данного метода в том что html-код остается практически неизменным, меняется только css и разумеется кроссбраузерно.

  8. #1134 lubitel3 в 11:45, 28 мая 2009:

    Ответить | Цитировать

    Доброго времени суток.

    Попробовал ваш код, понравилось. Только одно не получается, как вставляю в «контент» фиксированную таблицу так подвал отрывается.

    Как можно это исправить? Заранее благодарен за ответ.

  9. #1269 WebMast в 18:08, 2 июня 2009: (подписался)

    Ответить | Цитировать

    lubitel3, напишите мне на e-mail я вам обязательно отвечу. А то в комментариях работать с кодом сильно не удобно.

    Vic, спасибо ; ).

  10. #1628 tylik в 9:27, 13 июня 2009:

    Ответить | Цитировать

    Здраствуйте, ваш пример не корректно работает в opera. попробуйте сделать ресайз окна в ручную, если потянете вниз то футер на какое то время остается на том же месте а после нажатия F5 уходит на свое место, нет ли какого нибудь решения?

  11. #2498 WebMast в 7:59, 13 июля 2009: (подписался)

    Ответить | Цитировать

    tylik, у меня в Опера все супер ; ). Не совсем понятно что ты имеешь ввиду...

  12. #8221 антоха в 10:25, 19 ноября 2009: (подписался)

    Ответить | Цитировать

    Есть проблемка. Когда для html или body задана картинка в качестве фона, то она обрезается на уровне 100%, то есть на высоте окна браузера, а ниже идёт просто цветовой фон. Это происходит, конечно же, только когда контента больше, чем на одно окно.

    Пример можно посмотреть: tohas.info/dao/

  13. #8225 WebMast в 14:29, 19 ноября 2009: (подписался)

    Ответить | Цитировать

    Так сразу и не скажешь как решить вашу проблему...

  14. #9184 ALeX в 13:48, 4 января 2010:

    Ответить | Цитировать

    И в чем же кроссброузерность «Вашего» способа? — В Opera подвал отрывается при ресайзе за нижний край (((

  15. #9188 WebMast в 17:25, 4 января 2010: (подписался)

    Ответить | Цитировать

    ALeX, у меня в Опера 10.10 все нормально...

  16. #9225 redgr в 19:40, 10 января 2010:

    Ответить | Цитировать

    Автору спасибо большое!!! я так долго искал это решение!! очень благодарен :)

  17. #9419 Сергей в 12:56, 3 марта 2010:

    Ответить | Цитировать

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

    function footer (){

    var main_h = parseInt ($(«#main»).css ('height'));

    var header_h = parseInt ($(«#header»).css ('height'));

    var footer_h = parseInt ($(«#footer»).css ('height'));

    var bh = window.innerHeight;

    var footer = bh-main_h-header_h-7;

    if (footer > min-height){

    $(«#footer»).height (footer+'px');

    } else{

    $(«#footer»).height ('auto');

    }

    таким образом мы получаем резиновый див. Функцию надо прикрутить к wndow.onresize. наворачивать сайт целым рядом контейнеров , создвать отрицательные значения и т.п. — мне кажется лишне.

  18. #9420 WebMast в 19:52, 3 марта 2010: (подписался)

    Ответить | Цитировать

    Использование javascript тоже не всегда приемлемо : ).

  19. #10641 Валерий в 19:33, 21 октября 2010:

    Ответить | Цитировать

    Да, в опере косячок, при ресайзе вниз появляется белый блок, при обновлении подвал опускается вниз, как это исправить?

  20. #10670 Евгений Жлобо в 18:53, 1 ноября 2010: (подписался)

    Ответить | Цитировать

    Валерий, не вижу ошибки в Опере.

  21. Я тоже решил вопрос javascript-ом. Пока никаких багов не замечаю — футер, который всегда внизу.

    Только принцип моего кода отличается от вышенаведённого:)

  22. #12755 Руслан в 2:05, 12 января 2012:

    Ответить | Цитировать

    Добрый день.

    У меня проблемма в следующем, если кто сталкивался подскажите плиз, буду премного благодарен.

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

  23. #12760 vanoID в 10:37, 12 января 2012:

    Ответить | Цитировать

    >Руслан, контент, который находится в футере? Попробуйте посмотреть слои z-index тут это обсуждалось.

  24. #12761 Руслан в 11:16, 12 января 2012:

    Ответить | Цитировать

    нет, контент тоесть контент сайта ) который как обычно находится в содержимое" под этим контентом идет содержимое подвала

    пробовал ставить всяческие распорки, результат нулевой, но повторюсь после нажатия ctrl+R все становится на свои места и нормально отбражается, после рестарта компа та же беда, и так на всех машинах...

    спасибо за ответ, пройду еще по вашей ссылке.

  25. #12762 Руслан в 11:20, 12 января 2012:

    Ответить | Цитировать

    нет это никак не свзяано с z-index

  26. #12765 vanoID в 12:15, 12 января 2012:

    Ответить | Цитировать

    Обратитесь ко мне в асю. Чем смогу — тем помогу :)

  27. #12766 vanoID в 14:47, 12 января 2012:

    Ответить | Цитировать

    >Руслан, сайт посмотрел проблема в том, что вы заранее ставили высоту div блока height: 1418px; убрав которую сайт будет отображаться корректно :)

  28. #12793 vanoID в 12:28, 20 января 2012:

    Ответить | Цитировать

    @ Руслан:

    Проверяем как работает функция «Ответить»

    Руслан писал(а):

    #12762

    Руслан

    в 11:20, 12 января 2012:

    Ответить |

    Цитировать

    Edit

    нет это никак не свзяано с z-index

    А это мы цитируем :) тоже проверяем

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting