Прикрепляем низ сайта к низу экрана через css
Как прикрепить низ сайта к низу экрана? Есть решение только с помощью css, без использования javascript!
Создаем следующую разметку:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
Шапку сайта нужно помещать внутрь wrap
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
Контент сайта будем помещать внутри
, например так:
<div id="wrap">
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
Ну и css код:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
Для IE6 и IE8 используем стили:
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
Данное решение будет работать во всех популярных браузерах.
Оригинал решения тут - http://www.cssstickyfooter.com/using-sticky-footer-code.html
Комментарии
Оставить сообщение