Прикрепить элемент div внизу страницы

Question

У меня есть страница, где основное содержимое имеет переменную высоту. Я хочу, чтобы нижний колонтитул фиксированной высоты (около 50 пикселей) находился в самом низу страницы.

Мне нужно, чтобы он прокручивался вместе со страницей (чтобы не было фиксированной позиции).

Пара сценариев:

Если содержимое тела имеет высоту 300px, в окне нет полосы прокрутки, нижний колонтитул будет полностью и видимым.

Если содержимое тела имеет высоту 900px и в окне есть полоса прокрутки, нижний колонтитул будет полностью в нижней части, без пробела между нижним колонтитулом и нижней частью окна, и не будет виден, если вы не прокрутите до самого низа .

Есть ли способ сделать это в чистом CSS? Попытка избежать использования JS для этого.

Answer 1

см. В скрипте код и демо

скрипта: http://jsfiddle.net/gLpFJ/

демо: http://jsfiddle.net/gLpFJ/embedded/result/

---

Примечание: Пожалуйстаобратите внимание, что http://jsfiddle.net/yp4EH/ не для ответа, это просто для демонстрации.Я даю это для справки и для целей концепции. Эта скрипка http://jsfiddle.net/yp4EH/ не связана с этим вопросом, но основана на одной и той же ситуации - боковая панель, контент, нижний колонтитул всегда внизу.