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

Question

[lukoie]

Сделал я одностраничник, а подвал решил чтобы был статичным. Позишн абсолютом прижал в низу экрана и зет-индекс установил отрицательным.
В предыдущем блоке делал margin и/или padding по размеру блока подвала, но иногда подвала вообще не видно, а иногда даже когда видно, линки некликабельные.
Что я делаю не так, и как это сделать правильно?

Answer 1

[Андрей Ежгуров]

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.

Comments

[lukoie]

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

[lukoie]

даже если я ставлю ему не отрицательный зет-индекс, например 1, а у всех остальных блоков ставлю например 5, то все равно ссылки нерабочие. Так что дело не в отрицательном, а в положении блока.
Именно и надо чтобы блок находился под низом, но в то же время ссылки были кликабельны.

[Андрей Ежгуров]

Добавил ссылку на рабочий вариант в свой ответ выше.

[lukoie]

@eandr_67: рабочий? у меня в том варианте подвала вообще не видать.

[Андрей Ежгуров]

Во всех актуальных браузерах подвал выползает из под страницы - когда до конца страницы прокручиваем.

Или надо, чтобы подвал был всегда виден?

[lukoie]

@eandr_67: Макстон последней версии - подвала нет.

[Андрей Ежгуров]

Движок пробовал переключать?

Извини, но никто не проверяет вёрстку в Maxthon - это не тот браузер, который принимают во внимание.

Chrome 38.0.2125.104 - подвал есть
Firefox 33.0 - подвал есть
IE 11.0.9600.17358 - подвал есть

Answer 2

[Alexander Sydorenko]

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

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

Comments

[lukoie]

У предыдущего блока так и стоит поле. clear-both пробовал поставить, что-то результат не увидел.

Answer 3

[Александр]

сверстай примерно так:

< 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>

Кстати, зачем индекс отрицательный? Не надо так, потому футер и не видно!

Comments

[Александр]

table не мобильноугодный :)

[Андрей Ежгуров]

Затем, что табличная вёрстка - это прошлый век. Но злоупотреблять div'ами действительно не следует - есть же article, section, nav и т.д.

[lukoie]

ну например: jsfiddle.net/zfkjo8dj

[nowm]

@wxmaper: немного необычно — писать дивы и делать для них дополнительные стили, когда можно было использовать table, tr и td и вообще не писать никих стилей, так как вы div-блоками эмулируете функционал таблицы. Хоть вы дивами всё это обзовите, хоть aside-article-footer-header — суть не изменится: это табличная вёрстка, потому что используются табличные display.

[Александр]

@lukoie: нет, скорее так: jsfiddle.net/snu564hb

[Александр]

@Xu4: так или иначе для таблиц вы тоже будете писать стили. Так какая разница, по сути? На самом деле плюс такого метода в его гибкости. Сверстав страницу дивами с применением таких стилей, в дальнейшем можно будет менять дизайн страницы не прибегая к правке html, достаточно будет переписать css. С table + tr + td такое, конечно, тоже можно провернуть, но это уже будет костылем

[lukoie]

@Xu4: при верстке таблицами загрузка страницы застопорится покуда не прогрузится вся таблица, тогда как в дивках сразу отображает. В одностраничниках это критично.

[lukoie]

@wxmaper: и что мы видим? не работает так, как надо: jsfiddle.net/snu564hb/1

[Александр]

@lukoie: а ну да, этот метод подходит только для страниц у которых содержимое меньше размера окна :) я почему-то не подумал что автору нужно именно прилепить футер независимо от размера... тогда тут только fixed, как и предлагали

[nowm]

@lukoie: Круто, я не знал про стопоры при загрузке. Спасибо.

Answer 4

[Олег Солдатов]

Подсмотрите решение здесь. Это Bootstrap и в нем есть элемент Navbar, который можно прицепить либо в топ, либо в низ страницы. По сути используется свойство position:fixed. Посмотрите, как реализовано это в CSS и смело копируйте.

Comments

[lukoie]

Там же нет того, что мне надо. У меня подвал уже и так стоит внизу. Надо чтобы он появлялся из-под контента.ВОт представьте что навбар привязан к ниизу страницы, но под контентом. А приехав в самый низ страницы он из-под контента появится. Вот так мне надо.