Главная » Статьи » Умная техника липкого футера (footer)

Умная техника липкого футера (footer)

Умная техника липкого футера (footer)

От автора: в наши дни, услышав «липкий футер», я думаю, что большинство людей имеют в виду position:sticky, когда footer фиксируется на экране в контексте прокрутки какого-либо родительского элемента.

Я говорю не совсем об этом. Фиксированный футер был концепцией пользовательского интерфейса до того, как появились position:sticky, и он означает несколько иное. Идея состоит в том, что footer размещают в нижней части экрана, даже когда содержимого страницы недостаточно, чтобы сместить его туда.

В прошлом мы рассмотрели пять способов сделать это, в том числе несколько более современные методы, такие как calc(), flexbox и CSS Grid. Введите шестого претендента! Читатель Сильвио Роза написал следующее:

Вероятно, проще всего проверить это на экране рабочего стола среднего размера, где липкие нижние колонтитулы в любом случае имеют наибольшее значение. Это примерно так:

html, body { height: 100%;} body > footer { position: sticky; top: 100vh;
}

Что мне нравится в таком подходе, так это то, что он не требует какой-либо специальной дополнительной оболочки для содержимого, не являющегося нижним колонтитулом.

Это также немного напрягает. Когда я вижу top:100vh; то думаю, что это не сработает, потому что это вытолкнет нижний колонтитул за пределы видимой области. Но тут есть хитрый момент. Он будет делать это независимо от того, насколько велик нижний колонтитул (без магических чисел), а затем липкое позиционирование будет «всасывать колонтитул обратно», чтобы тот придерживаться нижнего края. Но он никогда не будет перекрывать контент, потому что его помещают под контент, что является основным принципом шаблона липкого нижнего колонтитула.

Автор: Chris Coyier

Источник: css-tricks.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен