Прижимаем блок (div) к низу экрана

1111111111Rating 5.00 (1 Vote)

Частенько приходится использовать шаблон\схему прижатия нижнего блока (подвала\футера) к низу экрана, я использую очень простую схему - два блока, один из них нижний, в другом можно располагать все остальное (меню, контент и т.п. - т.е. другие блоки).

Описывать структуру документа думаю нет смысла, приведу пример блоков и таблицы каскадных стилей.

Блоки

<div id="container">
    <div id="content"></div>
</div>
<div id="footer"></div>

CSS

html, body, #container {
    height: 100%;
    margin: 0;
    padding: 0;
}
body > #container { height: auto; min-height: 100%; }
#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 150px;
 margin-top: -150px;
 background: #202a49;
}
#content { padding-bottom: 150px; }

В блоке content можно располагать все то, что не относится к подвалу. ;-)

Добавить комментарий


Обновить
Защитный код

Сейчас 70 гостей и ни одного зарегистрированного пользователя на сайте

Вверх
Вниз