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

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

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. #9225 redgr в 19:40, 10 января 2010:

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

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

  2. #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. наворачивать сайт целым рядом контейнеров , создвать отрицательные значения и т.п. — мне кажется лишне.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Edit

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

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting