Нижний колонтитул веб-страницы остается в нижней части окна браузера

Question

Я хочу, чтобы мой нижний колонтитул (на некоторых страницах) оставался фиксированным в нижней части окна браузера независимо от высоты содержимого. Подобно некоторым панелям инструментов, которые вы видите, зафиксированы в нижней части окна браузера на таких сайтах, как www.facebook.com и панель инструментов meebo (например, abduzeedo.com).

Я сделал несколько быстрых поисков, и я вижу некоторые скрипты jQuery и хаки CSS с пользователями, жалующимися на несовместимость IE и т. Д. ... есть ли хороший стандартный способ сделать это? Даже с meebo и facebook кажется, что панель инструментов может немного подскочить, когда вы прокручиваете, тогда как решения для CSS выглядят очень прочными. Есть ли простое решение CSS? Я предполагаю, что это что-то вроде того, что нижний колонтитул имеет абсолютное позиционирование с дном: 0 ...

Answer 1

Если вы хотите что-то "прилипнет" к низу, you should use the css fixed position. Это найдет его в нижней части окна.

Использование «абсолютного» будет неправильным, поскольку оно будет располагать div относительно первого нестатического элемента. Большую часть времени это окно, но это не обязательно.

Html код:

<div class="bottom"><h1>Add to bottom</h1></div> 

Css код:

div.bottom { 
    position:fixed; 
    bottom:0px; 
    height:200px; 
    left:0px; 
    right:0px; 
    border:solid 4px red; 
} 

Answer 2

Используйте абсолютное позиционирование в CSS.

http://jsfiddle.net/TMD9X/

Answer 3

Существует очень хороший учебник с парнем по имени Сох Танака - http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/