Как прижать футер к низу страницы css. Как правильно прижать плавающий футер к низу страницы

23.05.2019

Это кошмар какой-то! Почему подвал вашего сайта опять «всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?

Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.

Делаем правильный футер для своего сайта

Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает «кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно (кружок «очумелые ручки» ) или начинающими веб-мастерами.

При этом на первых порах жизни сайта ничего ужасающего не происходит. И такая идиллия продолжается до тех пор, пока контент давит «своим весом » на подвал, не давая ему подняться вверх. Но стоит разместить на странице материал меньшего объема, и недавно «спокойный » футер моментально поднимается вверх, приводя весь дизайн сайта в неподобающий вид.

Для устранения этого «дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:

Первый способ

Первый способ «привязать » подвал «к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:

html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { height: 100%; } #wrapper { width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } #header { height: 150px; background-color: rgb(0,255,255); } #content { padding: 100px; height:400px; background-color: rgb(51,255,102); } #footer { width: 1000px; margin: -100px auto 0; height: 100px; position: relative; background-color: rgb(51,51,204); }