1

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

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

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

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

Спасибо.

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

Deleted
  • 371
fastreg0
  • 53
  • Добавте контейнеру с контентом padding-bottom:30px(высота вашего футера),тогда текта под футером не будет – koza4ok Feb 13 '13 at 16:53
  • В таком случае отступ только в самом конце блока появляется. Вот пример — http://jsfiddle.net/DYMWy/ – fastreg0 Feb 13 '13 at 17:05
  • http://jsfiddle.net/oceog/DYMWy/4/ так ? – zb' Feb 14 '13 at 01:14
  • еще так можно, http://jsfiddle.net/oceog/DYMWy/5/ , но мне кажется это хак какой-то. – zb' Feb 14 '13 at 10:42
  • eicto, спасибо, верно! Именно это и имелось ввиду, благодарен очень!

    Не нашел где проголосовать за ответ и закрыть вопрос, все в виде комментариев показано.

     – fastreg0 Feb 15 '13 at 20:39
  • 1
    Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана? –  Feb 17 '17 at 19:02

1 Answers1

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/

zb'
  • 18,100