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

Question

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

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

Answer 1

Если вы хотите, чтобы что-то «прилипло» к нижней части, , вам следует использовать css fixed position .Это поместит его в нижнюю часть окна.

Использование «absolute» не будет правильным, потому что будет расположен 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

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

Answer 3

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

http://jsfiddle.net/TMD9X/