Прибить footer к низу экрана
Простое, но не совсем очевидное решение для случаев, когда блоки должны тянуться по высоте в зависимости от содержимого.
Дано.
<div id="wrapper">
<div id="a">......</div>
<div id="b">......</div>
<div id="c">......</div>
</div>
<div id="footer">
........
</div>
Содержимое div’ов a, b, c меняется динамически. Нужно, чтобы footer был всегда прибит к нижнему краю, но между ним и wrapper’ом всегда оставался зазор.. Блоки спозиционированы при помощи float.
Решение:
wrapper’у придаём значение overflow:hidden.
CSS выглядит так:
html {
height:100%;
width:100%;
}
body {
height:auto !important;
position:relative;
min-height:100%;
}
#wrapper {
margin:0 auto;
width:940px;
overflow:hidden;
padding-bottom:150px;
}
#footer {
height:114px;
width:100%;
position:absolute;
bottom:0px;
}
Всё. Footer прибит к низу, расстояние между footer и wrapper равно разнице соответственно между padding-bottom и height.
ps. Естественно, справедливо для любого уровня вложенности.