Прижимаем подвал (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) к низу экрана

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

  • laik216

    можно код? =)

  • GRuff

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

  • http://hellektro.ru Сyber Freak

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

    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