Все записи с меткой ‘Прилипающий футер’
0
Прилипающий футер
Автор Jemand
Лично я никогда не пользовался прилипающим футером, но возможно кому нибудь, или мне, все таки понадобится данный код.
CSS- код:
html, body, #wrap {
height: 100%;
margin: 0px;
}
body > #wrap {
height: auto;
min-height: 100%;
}
#main {
padding-bottom: 50px; /* отступ должен быть равен высоте футера */
}
#footer {
position: relative;
margin-top: -50px; /* отрицательное значение высоты футера */
height: 50px;
clear:both;
background: #000;
text-align: center;
color: #fff;
font-size: 260%;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
HTML-код:
<div id="wrap">
<div id="header"></div>
<div id="main" class="clearfix"></div>
</div>
<div id="footer">
Я липкий футер! :)
</div>
Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8 
Firefox 3.5.4 
Opera 9.64 