Ако искате да имате 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; } |
ето и демото
Оставете коментар