Здравствуйте дорогие друзья. Бывают такие случаи что на сайте заказчика на некоторых страницах очень мало текста. И тогда низ сайта (подвал, он же футер) поднимается к верху странички. Тогда получается очень не красиво и иногда даже безобразно (особенно когда в футере размещена какая-то картинка типа трава или водичка и т.д.).
Что нужно сделать что б такую вот проблемку исправить? А нужно сделать следующее: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айт на всю высоту монитора или прижать футер к низу закончен. Всем спасибо за внимание!
Спасибо, очень понравилось
Мотивирующий пост 🙂