Вопрос действительно популярен, но как-то я и не думал о нем писать. Информации много на эту тему и писать еще что-то, я не видел смысла. Но меня попросили, поэтому не могу отказать, возможно еще кто-то воспользуется теми способами, которые помогают мне.
Способ №1
В принципе, данный способ простенький, да как и все остальные 🙂 Его суть в том, что все блоки независимы. Шапка, контент и подвал все являются родительскими блоками и никто не вложен друг в друга.
<html> <body> <head></head> <div id="header">Содержимое шапки</div> <div id="content">Содержимое контента</div> <div id="footer">Содержимое подвала</div> </body> </html>
Далее задаем стили. Обязательно html,body задать высоту в 100% и определить подвалу абсолютное позиционирование. В то же время, контенту задать отступ padding равный высоте подвала, ну или немного больше. Кому-то это может показаться минусом, потому как Высота подвала должна быть определена заранее. Многих такой вариант не устроит. Для остальных, нужно добавить стили:
html,body{height: 100%}
body{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
margin:0;
padding:0;
font:15px Tahoma;
color:#555;}
#header{
height:150px;
background:#ccc;}
#content{
padding-bottom:200px;
height:100%;}
#footer{
height:200px;
width:100%;
position:absolute;
bottom:0;
background:#333;}
Способ №2
По своей сути, способ такой же как и первый, но тут все блоки заключены в родительский контейнер.
<html> <body> <div class="wrapper"> <div class="header">Содержимое шапки</div> <div class="content">Содержимое контента</div> <div class="footer">Содержимое подвала</div> </div>
Стили будут следующими:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
}
.header {
height: 150px;
background:#ccc;
}
.content {
padding-bottom: 90px;
}
.footer {
position: absolute;
background:#333;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
}
Есть еще много способов, но именно эти два меня всегда выручают. Все зависит от того какая структура, используется ли контейнер или нет.
На этом все, спасибо за внимание. 🙂
