Закрыть ... [X]

Привязать футер к низу

Главная » CSS » Как привязать футер к низу страницы

Paul Osmahcko, 19.12.2017 13:30

bottom, css, footer, height, html, less

Сегодня найдем окончательное надежное решение вопроса как средствами css прижать футер к низу страницы с помощью css и html. Притянуть футер низ страницы. Также этим способом можно отцентровать контент content по середине страницы.

Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:

После того как структура страницы готова, приступаем к настройке css.

Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.

Прижать футер к низу экрана css код:

Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана.

В большинстве случаев footer футре в низу страницы фиксированной высоты, поэтому этот способ работает без проблем.

Если вы знаете более простой способ, или нашли ошибки в этом способе — регистрируйтесь и пишите комментарии. Будем вместе искать идеальный рабочий способ привязки футера к низу страницы.


Источник: http://wiki.pwodev.com/%D0%BF%D1%80%D0%B8%D0%B2%D1%8F%D0%B7%D0%B0%D1%82%D1%8C-%D1%84%D1%83%D1%82%D0%B5%D1%80-%D0%BA-%D0%BD%D0%B8%D0%B7%D1%83-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B/


Поделись с друзьями



Рекомендуем посмотреть ещё:



Ещё статьи по теме: Как с помощью CSS прижать footer к низу окна браузера / me
Сделать оригинальные поделки руками
Плоское плетение из бисера
Декупаж белой рисовой бумагой
Как связаться с билайном
Вяжем вместе онлайн

Привязать футер к низу Привязать футер к низу Привязать футер к низу Привязать футер к низу Привязать футер к низу Привязать футер к низу Привязать футер к низу

ШОКИРУЮЩИЕ НОВОСТИ