Получение нижнего колонтитула, когда страница сделана из абсолютного позиционирования

Question

У меня есть страница, где ее разделы сделаны из абсолютно позиционированных div.

Это прекрасно работало, пока я не попытался получить нижний колонтитул на странице.

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

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

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

Вот jsbin: http://jsbin.com/oxefev/edit#javascript,html

Эту проблему было бы чрезвычайно легко решить, если бы был способ заставить свойство bottom css перейти в конец страницы вместо экрана.

Редактировать: Я мог бы просто сделать его статическим и использовать свойство margin-top, чтобы переместить его вниз страницы, установив его на margin-top:1000px;, но тогда мне придется менять это каждый время добавления или удаления контента со страницы.

Answer 1

Моя первая рекомендация будет такова: не располагайте абсолютно все.Какая выгода?

Тем не менее, вы можете достичь того, что вы ищете, с помощью нежного применения JavaScript.Что-то вроде:

document.getElementById('footer').style.top = document.getElementById('content-wrapper').clientHeight + 150 + 'px';

РЕДАКТИРОВАТЬ:

Это также, кажется, работает и не требует изменений, если вы отрегулируете высоту вашего заголовка (+/- несколько пикселейпо моделям коробок):

document.getElementById('footer').style.top = document.body.clientHeight + document.getElementById('footer').clientHeight + 'px';

Answer 2

jQuery (document) .height () возвращает правильные, согласованные результаты для всех браузеров.Как только вы узнаете высоту позиционирования контента, нижний колонтитул должен быть легким.