Прижимаем подвал (footer) к низу экрана

Не всегда страничка должна иметь много контента (например страничка с сообщением об ошибке 404), а красивый подвал посреди экрана выглядит как-то неуместно. Надо бы его прижать 🙂

Логический алгоритм следующий:

  1. Высоту странички body выставляем в 100% (минимум);
  2. Основной слой (page), в котором будет шапка (header) и контент (content) так же растягиваем на 100% по высоте;
  3. Подвал (footer) прижимаем книзу position:relative; bottom:0;
  4. Т.к. подвал находится ниже 100% слоя page, то нужно его поднять на столько, сколько он сам имеет роста: margin-top:-50px;
  5. Теперь страничка и без скрола, и подвал внизу, но при нынешнем состоянии контент будет залезать под подвал, применим-ка мы к нему padding-bottom:60px;

Теперь должно быть в норме. Покажу на картинке:

Прижимаем подвал (footer) к низу экрана

Надеюсь, что логика понятна. Если кто не поймет — выложу кодом.

Размещено в CSS, HTML and tagged , .

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • laik216

    можно код? =)

  • GRuff

    в 5 пункте «padding» с двумя «d», поправь =)

  • вот еще интересная методика:

    DOM:

    CSS:
    #wrapper {
    height:auto;
    min-height:100%;
    margin:0;
    }

    #footer-guarantor {
    height:60px;
    clear:both;
    }
    #footer {
    height:50px;
    clear:both;
    margin:-50px 0 0;
    }

    Минус в том, что необходим пустой div

  • El mariachi

    Я делал по такой же логике, только
    Подвал (footer) прижимаем книзу position:absolute; bottom:0;
    и там же margin-top:50px; (без минуса)
    Ни фига в ИЕ не работало (хотел на табличную верстку возвращаться)
    По этому примеру везде работает!
    Спасибо за подсказку.
    Не мог продолжать верстать….

    • В xHTML это работает, в HTML5 уже нет.