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

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

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

CodePen Embed Fallback

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

Автор: Chris Coyier

Источник: webformyself.com