sticky footer или footer в долната част на страницата при малко съдържание

Ако искате да имате footer, който да стои най-отдолу на страницата дори когато съдържанието е малко, ето как става това.
Първо задаваме 100% височина на html, body и нулираме margin и padding на body

html, body{
height: 100%;
}
body{
margin: 0;
padding: 0;
}

Прави се блок, който обагражда основното съдържание на страницата – #main_container

#main_container{
margin:0 auto -181px;
min-height:100%;
height:auto !important;
height: 100%;
}

Височината я определяме с 3 реда заради ie6.
Блокът който ще държи съдържанието

.main_block {
margin:0 auto;
padding: 0 0 181px;
width:961px;
}

задава му се padding-bottom:181, колкото е височината на footer, но трявба да се има предвид,
че ако са зададени padding или margin на footer, padding на .main_block трябва да е
сумата на височината + padding и margin на footerпосле слагаме

<div id="footer"></div>

и

#footer {
margin:0 auto;
width:961px;
background:#000;
color:#FFF;
height:181px;
}

Това е всичко 🙂
ето и целия код:

html, body{
height: 100%;
}
body{
margin: 0;
padding: 0;
}
#main_container{
margin:0 auto -181px;
min-height:100%;
height:auto !important;
height: 100%;
}
.main_block {
margin:0 auto;
padding:0 0 231px;
width:961px;
}
#footer {
margin:0 auto;
width:961px;
background:#000;
color:#FFF;
height:181px;
}

ето и демото

Оставете коментар

Design To HTML от Стайл нет