Cайт на всю высоту монитора или прижать футер к низу

Советую

Здравствуйте дорогие друзья. Бывают такие случаи что на сайте заказчика на некоторых страницах очень мало текста. И тогда низ сайта (подвал, он же футер) поднимается к верху странички. Тогда получается очень не красиво и иногда даже безобразно (особенно когда в футере размещена какая-то картинка типа трава или водичка и т.д.).

Что нужно сделать что б такую вот проблемку исправить? А нужно сделать следующее:1. Нужно вынести подвал (он же футер) за основной блок где размещается весь контент. Вот так:

<html>
<head></head>
<body>
<div id="content">
<div id="header"></div>
<div id="leftblock"></div>
<div id="rightblock"></div>
</div>
<div id="footer"></div>
</body>
</html>

2. Потом добавляем в код  2 блока “очистку” и «пустоту»:

<div class="clear"></div> избавляемся от глюков
<div class="empty"></div> место под футер

Получится:

<html>
<head></head>
<body>
<div id="content">
<div id="header"></div>
<div id="leftblock"></div>
<div id="rightblock"></div>
<div class="clear"></div>
<div class="empty"></div>

</div>
<div id="footer"></div>
</body>
</html>

3. Теперь открываем сss файл и добавляем строки:

html, body {
width: 100%;
height: 100%;
}

* html #container {
height: 100%;
}
#content {
position: relative;
width: 1280px;
margin: 0 auto;
min-height: 100%;
}

.clearfloat {
clear: both;
}

.empty {
height: 50px;  ширина подвала
}
#footer {
position: relative;
width: 1280px;
height: 50px;
margin: -50px auto 0;
}

После таких манипуляций с кодом, у Вас футер всегда будет снизу.

А на этом пост Cайт на всю высоту монитора или прижать футер к низу закончен. Всем спасибо за внимание!

Яcreated’s blog

Получать обновления ЯcReated’s blog: