CSS авто высота и липкий нижний колонтитул

Question

Я пытаюсь обдумать правила позиционирования CSS.Я пытаюсь понять, как сделать липкий нижний колонтитул, но он перестает быть липким, когда основная область контента больше не может быть сжатой.Пример того, о чем я говорю, можно найти здесь http://ryanfait.com/sticky-footer/. Может кто-нибудь объяснить мне, почему нижний колонтитул перестает быть липким и, в частности, какие свойства CSS вызывают это?Для меня, когда я смотрю на CSS, кажется, что нижний колонтитул должен всегда оставаться прикрепленным к нижней части окна браузера, но здесь это не так.Почему?

Спасибо за помощь.

Answer 1

Дайте этому попробовать. http://www.cssstickyfooter.com/ (ссылка больше не действительна)

Он похож на Райана, но по памяти, мне кажется, мне повезло больше (хотя оба очень похожи).

Answer 2

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

http://jsfiddle.net/biznuge/thbuf/8/

Вы должны увидеть из скрипки, что вам нужен элемент '#container', который обернет всю страницу. это дает вам 100% высоты (обратите внимание на хаки, т.е. присутствующие в css), и позволяет и дочерним элементам этого элемента «контейнера» получать высоту или положение относительно нее.

Подводные камни этого метода:

• Вам необходимо указать отступы / отступы в нижней части «#main» элемент, так что нижний колонтитул смещается дальше, чем это естественно будет, поэтому нужно знать хотя бы широкий диапазон того, что ваш нижний колонтитул высота должна быть.
• Похоже, IE не распознает (<= IE8 не протестирован 9) размер браузера события, если вы измените размер только нижнего края браузера, поэтому в в этом конкретном случае липкость потерпит неудачу до горизонтального изменение размера также было представлено как событие. </li>
• если вы хотите фиксированную ширину макета, вы должны поместить это ограничение не на элемент "#container", а на "#page" элемент, и, возможно, ввести дополнительные элементы под «#footer» для укажите любые ограничения ширины.

Удачи!

Answer 3

Вы должны объявить нижний колонтитул за пределами оболочки и дать немного height для нижнего колонтитула, а верхний край должен -(footer-height)px

<div id="wrapper">
  ---
 ------
</div>
<div id="footer">
</div>

# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}