<rmcreative>

RSS

CSS. Спускаем подвал вниз!

13 марта 2007

Вполне типичная задача: сделать подвал всегда внизу. Независимо от того, есть ли содержимое на странице или нет. Как ни странно, для такой типичной задачи существует очень много решений, большинство из которых далеко не идеальны.

Ниже приведён вариант, замечательно работающий во всех браузерах:

<div id="main-page">
  ...
</div>
<div id="footer">
  ...
</div>
* { margin: 0; padding: 0;}
html{ height: 100%; }
body{ position:  relative; height: auto !important; height: 100%; min-height: 100%; }
#footer{ position:  absolute; left: 0; bottom: 15px; width: 100%; }
#main-page{ padding-bottom: 4em; }

Исходное решение позаимствовано у Ростислава Чебыкина, где подробно расписано что и почему.

В моём решении поправлен глюк с IE, когда подвал уносится далеко вправо, ну и сделан небольшой отступ от нижнего края страницы.

Важное замечание

Комментарии RSS

  1. №2923
    asd
    asd 25 авг. 2010 г., 12:42:29

    Не работает

  2. №3162
    ^__^
    ^__^ 29 сент. 2010 г., 16:10:08

    Отлично работает, большое спасибо!

  3. №5933
    Кирилл
    Кирилл 20 февр. 2012 г., 17:44:37

    Низкий поклон! Я вам благодарен до глубины души. Спасибо, долго не мог сделать

  4. №6066
    Рост
    Рост 22 марта 2012 г., 18:45:30

    Помогло поправить подвал на сайте. Получилось сразу. Спасибо.

  5. №6897
    Ник
    Ник 24 окт. 2012 г., 8:18:00

    Спасибо! Всё работает.

  6. №9131
    ощт
    ощт 11 авг. 2014 г., 21:06:54

    если контента нет, не работает!!! причём все решения по этому вопросу из инета глючные

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.