height | Wiki | PWODEV

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

Paul Osmachko — Tue, 19 Dec 2017 12:30:04 +0000

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

Для того чтобы прижать footer к низу страницы нужно создать определенную структуру 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 футре в низу страницы фиксированной высоты, поэтому этот способ работает без проблем.

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

Сообщение Как привязать футер к низу страницы появились сначала на Wiki | PWODEV.

Viewport — мета тег для нормальной верстки для мобильного устройства.

Paul Osmachko — Tue, 24 Oct 2017 09:19:16 +0000

Viewport это штука без которой нельзя обойтись. Если вы верстаете под мобильное устройство iPhone или Android да и вообще любое другое устройство, правильно чтобы верстка отображалась одинаково на всех видах экрана, чтобы не было косяков и все было корректно по дизайну.

Если вы верстаете правильно, а так и надо, то вам пригодится очень важный тег который позволит убрать стандартное увеличение, зум (zoom) и чтобы ширина (width) и высота (height) на мобильном (mobile) устройстве отображалась пиксель в пиксель, только тогда мы сможем видеть реальные размеры на лубом размере экрана.

Вот собственно сам мета тег:

Вставлять его надо в самом вверху после открытия

Сообщение Viewport — мета тег для нормальной верстки для мобильного устройства. появились сначала на Wiki | PWODEV.

Height 100vh for mobile browsers iPhone and Android

Paul Osmachko — Wed, 18 Oct 2017 13:29:39 +0000

При высоте контейнера height:100vh; на мобильных устройствах, этот контейнер немного перекрывается адресной строкой вверху, либо панелью управления мобильного браузера внизу. Мобильном устройстве, при прокрутке страницы ниже, адресная строка и панель управления убираются, после чего наш контейнер показывается полностью.

Отследить правильный размер экрана нам поможет этот JS код:

window.innerHeight //показывает действительную высоту экрана

Запускать это лучше всего при загрузке страницы, а потом при скролле браузера.
Событие scroll:

window.onscroll = function () {
   // scroll event
};

Сообщение Height 100vh for mobile browsers iPhone and Android появились сначала на Wiki | PWODEV.