Позиционирование внизу веб-страницы

Question

У меня странная проблема css. У меня есть баннер, который нужно разместить внизу каждой страницы.

Для этого я установил body на position: relative;, а мой баннер на position absolute; bottom: 0px;

Проблема в том, что мой баннер по-разному размещается на разных страницах, например: http://www.plotsandhouses.com/node/1, http://www.plotsandhouses.com/node/29, http://www.plotsandhouses.com/node/30

Div 'custom-page_closure_wrapper' - это то, что я пытаюсь расположить внизу страниц. Я могу сделать это, установив position: fixed;, но я на самом деле не хочу, чтобы div был виден постоянно - только когда видна нижняя часть страницы или пользователь прокручивает ее вниз, чтобы увидеть.

Может кто-нибудь, пожалуйста, просветите меня о том, что мне не хватает?

Answer 1

Чтобы добавить ответ Марка, есть CSS-решение, которое называется Sticky Footer .

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

Answer 2

Вы можете найти обширную информацию по этому вопросу здесь .

Answer 3

Вы можете попробовать добавить следующее в ваш CSS-файл:

body {height:100%;}
#custom-body-wrapper {height:100%;} /*this is the container of your absolute div*/

и удалить position:relative на вашем теге body.