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

Question

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

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

Answer 1

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

Это похоже на одно изображение Райана, но из памяти я думаю, что мне повезло с этим (хотя оба они очень похожи).

Answer 2

Вы должны объявить колонтитула за пределами обертки и дать некоторые 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; 
} 

Answer 3

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

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

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

Ловушки этого метода является:

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

Удачи!