19.01.2022

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

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

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

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

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

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

CSS

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

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *