Как сделать липкие колонтитулы

Оцените материал
(0 голосов)

Проблема

Это одна из старейших и самых известных проблем веб-дизайна. Она встречается настолько часто, что большинство из нас обязательно сталкивались с ней в тот или иной момент своей карьеры. В двух словах смысл ее таков: нижний колонтитул с любой блочной стилизацией, такой как фон или тень, прекрасно работает, когда содержимое достаточно длинное, но ломается на коротких страницах (таких, как сообщения об ошибке). Поломка выглядит так, что нижний колонтитул «прилипает» не к нижней кромке окна просмотра, как нам хотелось бы, а к нижней кромке содержимого.
Объясняется такая популярность этой проблемы не только ее вездесущностью, но также тем, насколько обманчиво простой она кажется с первого взгляда. Это классический случай задачи, на решение которой приходится затратить намного больше времени, чем поначалу ожидалось. Помимо этого, средствами CSS 2.1 она все еще не решается: практически все классические решения требуют указывать фиксированную высоту нижнего колонтитула, что надуманно, а зачастую попросту невозможно. Кроме того, все эти решения чрезмерно сложные, грязные и предъявляют специфические требования к разметке.

Но тогда ничего лучше в нашем распоряжении не было, учитывая ограничения CSS 2.1. Однако с современным CSS мы можем намного больше! Так как же
решить задачу?

Решение с фиксированной высотой

Мы будем работать с очень простой страницей, внутри элемента  <body> которой содержится следующая разметка:
HTML
<header>
<h1>Site name</h1>
</header>
<main>
<p>Bacon Ipsum dolor sit amet…
<!-- Текстовая забивка с веб-сайта baconipsum.com --></p>
</main>
<footer>
<p>© 2015 No rights reserved.</p>
<p>Made with ♥ by an anonymous
pastafarian.</p>
</footer>
Мы также определили несколько простых стилей для нашей страницы, в том числе добавили фон к нижнему колонтитулу. Теперь давайте немного уменьшим объем содержимого. Результат этой операции вы видите на рисунке.

Проблема липкого нижнего колонтитула во всей красе! Великолепно, мы воспроизвели проблему, но как нам ее решить?

Предположим, что текст в нижнем колонтитуле никогда не будет переноситься на новую строку. Тогда мы можем вычислить его высоту в формате, подходящем для использования в CSS-коде:
2 строки × высота строки + 3 × поле абзаца + + забивка по вертикали = =2 ×  1.5em + 3 ×  1em +  1em =  7em
Аналогично, высота заголовка равна 2.5em. Следовательно, используя единицы измерения, привязанные к окну просмотра, и функцию  calc(), мы можем «прилепить» наш нижний колонтитул к нижней кромке, используя, по сути, одну строку
CSS-кода:
main {
min-height: calc(100vh - 2.5em - 7em);
/* Нужно избежать забивки/рамок и прочих
игр с высотой: */
box-sizing: border-box;
}
В качестве альтернативы мы могли бы создать обертку вокруг наших элементов  <header> и  <main> , для того чтобы оставалось только вычислить высоту нижнего колонтитула:
#wrapper {
min-height: calc(100vh - 7em);
}
Это работает, и присущий данному решению минимализм делает его несколько лучше существующих решений с фиксированной высотой. Однако оно совершенно непрактично, и его невозможно использовать нигде, кроме веб-сайтов с самыми простыми вариантами разметки. Оно основано на
предположении, что в нижнем колонтитуле не будет переносов строки, значение  min-height необходимо корректировать каждый раз, когда меняются размеры нижнего колонтитула и если только мы не согласны обернуть наш заголовок и содержимое в еще один элемент HTML, те же вычисления и модификации необходимо делать также и для заголовка. Определенно, в наши дни должен существовать лучший путь!

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/sticky-footer-fixed

Решение на флексбоксах

Флексбоксы (о них я писал здесь) идеально подходит для решения подобных задач. Мы можем достичь превосходной гибкости с помощью всего нескольких строк CSS-кода, и нам не потребуются корявые вычисления и дополнительные HTML-элементы. Во-первых, мы должны применить  display: flex к элементу  <body>, так как это родительский элемент всех трех наших главных блоков. Это включит разметку гибкого поля для всех них. Также нам нужно для свойства  flex-flow установить значение  column, иначе блоки будут выводиться друг за другом по горизонтали в одной строке:
body {
display: flex;
flex-flow: column;
}
Пока наша страница выглядит практически так же, как до применения всех этих хитростей гибкого поля, так как каждый элемент растянут на всю ширину просмотрового окна, а его размер определяется его содержимым. Ну конечно, ведь мы же еще не воспользовались преимуществом гибкого поля! Для того чтобы чудо произошло, нам нужно задать значение  100vh для свойства  min-height элемента <body> , чтобы он занимал по меньшей мере всю высоту окна просмотра. Пока что результат все так же выглядит, как на рисунке выше, поскольку мы, конечно, указали минимальную высоту для всего элемента  <body>, но высота каждого поля все так же определяется его содержимым (то есть определяется изнутри, если говорить на профессиональном жаргоне CSS).

Мы должны сделать так, чтобы высота заголовка и нижнего колонтитула определялась изнутри но при этом высота содержимого гибко менялась, растягиваясь на все оставшееся пространство. Этого можно добиться, задав большее нуля
(подойдет 1 ) значение  flex для контейнера  <main>:

body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main { flex: 1; }

Вот и всё, больше никакой код не требуется! Идеально липкий нижний колонтитул  — и всего лишь четыре простые строки кода! Ну разве не чудо эти flexbox?

СОВЕТ

Свойство flex - это сокращение, объединяющее свойства flex-grow, flex-shrink и flex-basis. Любой элемент, для которого определено значение flex больше 0, становится гибким, а кроме того, flex управляет отношением между габаритными размерами различных гибких элементов. Например, в нашем случае если бы для <main> мы определили flex: 2, а для <footer> — flex: 1, то высота содержимого в два раза превышала бы высоту нижнего колонтитула. То же самое произошло бы с парой значений 4 и 2 вместо 2 и 1, так как важны не абсолютные значения, а отношение между ними.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/sticky-footer

Десерт на сегодня - видео про экстремалов и высоту. Я бы не стал так делать

Прочитано 327 раз Последнее изменение Суббота, 10 июня 2017 18:28
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+