1

Здравствуйте!

В верстке страницы футер прижат к низу экрана:

div.footer {
width: 100%;
height: 30px;
position: fixed;
bottom: 0;
}

Контента на странице много и из-за свойства fixed у футера теперь часть контента не видна, т.к. она находится "ниже" футера. Как сделать отступ блока с контентом от низа экрана так, чтобы он не "залазил" за футер?

Спасибо.

Вот пример — http://jsfiddle.net/DYMWy/

6
  • Добавте контейнеру с контентом padding-bottom:30px(высота вашего футера),тогда текта под футером не будет
    – koza4ok
    Commented 13 февр. 2013 в 16:53
  • В таком случае отступ только в самом конце блока появляется. Вот пример — jsfiddle.net/DYMWy
    – fastreg0
    Commented 13 февр. 2013 в 17:05
  • jsfiddle.net/oceog/DYMWy/4 так ?
    – zb'
    Commented 14 февр. 2013 в 1:14
  • еще так можно, jsfiddle.net/oceog/DYMWy/5 , но мне кажется это хак какой-то.
    – zb'
    Commented 14 февр. 2013 в 10:42
  • 1
    Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана?
    – user232857
    Commented 17 февр. 2017 в 19:02

1 ответ 1

3

Два способа, оба на html5

первый используя псевдоэлемент :before

div.footer:before {
    position: absolute;
    top: -10px;
    width: 100%;
    height: 10px;
    background: white;
    display: block;
    content: '\0000a0';
    opacity: 0.7;
}

http://jsfiddle.net/oceog/DYMWy/4/

второй, используя fixed и bottom:

div.content {
    width: 100%;
    margin-bottom: 20px;
    position: fixed;
    top: 5px;
    bottom: 15px;
    overflow-y: scroll;
}

http://jsfiddle.net/oceog/DYMWy/5/

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.