Как прижать футер к низу
Довольно часто требуется, чтобы нижняя часть — футер был всегда у нижнего края браузера, дабы не было пустоты. При этом если контента мало, то футер должен быть внизу, если много, то должен отодвигаться контентом.
Есть куча способов сделать это. Рассмотрим один из них.
Вот примерный код страницы с прибитым футером.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Футер в низу</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html, body { height: 100%; } body { margin: 0; padding: 0; } .main { position: relative; min-height: 100%; height: auto !important; _height: 100%; } .footer-margin { position: static; width: auto; border: 0px dotted maroon; clear: both; margin: 0; padding: 0; height: 1; font-size: 1px; height: 100px; } .footer { position: absolute; left: 0; bottom: 0; z-index: 6; height: 54px; width: 100%; overflow: hidden; border: 0px dotted green; background: #f8f7f1; } </style> </head> <body> <div class="main"> контент <div class="footer-margin"></div> <div class="footer"> Футер, который всегда будет внизу </div> </div> </body> </html> |
Если в кратце, то:
1. делаем блок .main на всю ширину и всю высоту
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* установка height: 100% для body и html необходима, иначе работать не будет */ html, body { height: 100%; } .main { /* relative - чтобы после можно было в нём абсолютно позиционировать элементы */ position: relative; /* устанавливаем минимальную высоту для блока */ min-height: 100%; height: auto !important; _height: 100%; } |
про установку минимальной высоты блока можно прочитать здесь.
2. Позиционируем блок .footer внутри .main у нижнего края
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.footer { position: absolute; left: 0; bottom: 0; z-index: 6; height: 54px; /* высота взята произвольно */ width: 100%; /* надо установить, иначе ширина блока будет равнятся ширине контента */ overflow: hidden; background: #f8f7f1; /* просто так, чтобы было видно футер */ } |
Всё, теперь блок .footer всегда будет внизу блока .main.
Если контента будет мало, то блок .main всё равно будет на всю высоту и блок .footer будет внизу.
Если конента много, то блок .main будет раздвигаться, и блок .footer, спозиционированный у низа блока .main будет опускаться вниз.
3. Но тут есть ещё один момент
При пополнении контентом и расширении блок .main будет полность заполнен контентом, при этом абсолютно спозиционированный блок .footer будет перекрывать контент внизу блока .main. Чтобы этого не было, надо сделать так, чтобы низ под блоком .footer не заполнялся контентом. Для этого после всего контента вставляем какой нибудь блок, в примере .footer-margin , с нужной высотой, например равной высоте футера, ну или больше, чтобы был отступ. Тогда при малом количестве контента блок .footer-margin не будет способствовать распиранию блока .main, но если контента будет много, то будет распирать блок .main, при этом образуя пустоту, как раз под блоком .footer.
Была идея задать просто задать для блока .main padding-bottom, но нет, в этом случае высота блока .main меняется и даже при отстутвии контента будет появлятся вертикальная прокрутка, так как height: 100% + padding-bottom.
Вот и всё, надеюсь всё понятно. Хотя не уверен что всё будет понятно, так как писал всё второпях.
Стопудово тут можно что то упростить или сделать как то красивее, но передо мною стояла задача сделать быстро и чтобы работало
Тестировал в FF 3.6, Chrome, Opera 9.6, IE 6.
