Как сделать подвал сайта статичным?

Сделал я одностраничник, а подвал решил чтобы был статичным. Позишн абсолютом прижал в низу экрана и зет-индекс установил отрицательным.
В предыдущем блоке делал margin и/или padding по размеру блока подвала, но иногда подвала вообще не видно, а иногда даже когда видно, линки некликабельные.
Что я делаю не так, и как это сделать правильно?
  • Вопрос задан
  • 4482 просмотра
Пригласить эксперта
Ответы на вопрос 4
@eandr_67
web-программист (*AMP, Go, JavaScript, вёрстка).
1. z-index не должен быть отрицательным - именно из-за этого ссылки не работают. В принципе, z-index для подвала вообще не нужен, но если делаешь, то только положительным.

2. Нужно не position: absolute, а position: fixed. Тогда подвал всегда будет прижиматься к низу экрана.

В общем, что-то вроде:
html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.content { /* основное содержимое сайта */
  margin-bottom: 120px; /* высота подвала */
}

.content:after { /* не обязательно - только чтобы дополнительные div'ы с clear: both не вставлять */
  content: "";
  height: 0px;
  display: block;
  margin: 0px;
  padding: 0px;
  clear: both;
}

.footer { /* собственно подвал, расположенный сразу за .content */
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 120px;
}


Если же ты хочешь, чтобы контент наползал на подвал, то вот такой вариант. Там главное - чтобы подвал в тексте стоял выше контента и чтобы у контента было position: relative. Никаких z-index'ов...

И, разумеется, у наползающего контента снизу должен быть margin, а не padding.
Ответ написан
Здравствуйте!

В предыдущего блока margin-bottom должен быть в высоту подвала. А еще лучше все предыдущие блоки поместить в враппер, в котором margin-bottom в высоту подвала. Предыдущий блок должен иметь clear:both; А вообще было бы удобнее если бы Вы показали где получается, а где нет.
Ответ написан
сверстай примерно так:

< div style="display: table;height:100%">
< div style="display:table-row">
< div style="display:table-cell">ШАПКА< / div>
< / div>

< div style="display:table-row">
< div style="display:table-cell">ТЕЛО< / div>
< / div>

< div style="display:table-row; height:1px">
< div style="display:table-cell">ПОДВАЛ< / div>
< / div>
< / div>

Кстати, зачем индекс отрицательный? Не надо так, потому футер и не видно!
Ответ написан
Soldata
@Soldata
Программист, владелец IT-компании.
Подсмотрите решение здесь. Это Bootstrap и в нем есть элемент Navbar, который можно прицепить либо в топ, либо в низ страницы. По сути используется свойство position:fixed. Посмотрите, как реализовано это в CSS и смело копируйте.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы