Как привязать футер к низу страницы
Сегодня найдем окончательное надежное решение вопроса как средствами css прижать футер к низу страницы с помощью css и html. Притянуть футер низ страницы. Также этим способом можно отцентровать контент content по середине страницы.
Для того чтобы прижать footer к низу страницы нужно создать определенную структуру html:
<html>
<head></head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div>
</body>
<html>После того как структура страницы готова, приступаем к настройке css.
Нам нужно сделать так чтобы html и body занимали всю высоту страницы (full screen height). А блок wrapper имел минимально высоту экрана, а контент его бы растягивал как нужно. Дальше нам нужно прижать футер к низу страницы или к низу экрана так чтобы он всегда оставался ниже контента, а если контента мало но футер прижимается в низу экрана. Также контенту нужно сделать отступ внизу для футера.
Прижать футер к низу экрана css код:
html,
body{
height: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
}
.main {
padding-bottom: 80px;
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 80px;
}Этот способ работает только в случае фиксированного футера. Это означает что footer прижать к низу страницы будет сложнее если высота его динамическая, так как надо будет предусмотреть правильный нижний отступ для div с классом main. Тут уже нужен будет javascript и понадобится информация как в мобильном браузере получить высоту экрана.
В большинстве случаев footer футре в низу страницы фиксированной высоты, поэтому этот способ работает без проблем.
Если вы знаете более простой способ, или нашли ошибки в этом способе — регистрируйтесь и пишите комментарии. Будем вместе искать идеальный рабочий способ привязки футера к низу страницы.
Читайте также:
- Отцентровать popup с помощью css
- Как привязать футер к низу страницы
- Настройка PhpStorm pug (jade) и less Watchers
- Текст в одну строку и троеточие в конце CSS
- Height 100vh for mobile browsers iPhone and Android
Один комментарий на «“Как привязать футер к низу страницы”»
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
[…] мы писали о том как привязать футер к низу страницы, сегодня мы рассмотрим как отцентровать popup с помощью […]