| Kosten | Суббота, 07 Декабря 2019, 03:36 | Сообщение 1 |
| Этот явно нарушенный макет возникает, когда нижний колонтитул статически расположен в конце текста, но на странице не так много контента. Нет ничего, что могло бы сдвинуть нижний колонтитул вниз, и он остается в середине экрана, оставляя огромную область пустого пространства под ним.
В этом кратком уроке мы рассмотрим современную технику создания нижних колонтитулов, которые гарантированно всегда будут придерживаться нижней части страницы.
Техника
Чтобы предотвратить вышесказанное, мы будем создавать нашу страницу, используя flexbox, самый продвинутый инструмент CSS3 для создания адаптивных макетов. Для тех из вас, кто не знаком с моделью flexbox и ее свойствами, мы оставим пару ссылок в конце статьи.
Наша простая демонстрационная страница будет иметь верхний колонтитул, основной раздел и нижний колонтитул.
Вот HTML, ничего необычного там нет.
Код <body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
Чтобы включить гибкую модель, мы добавляем display: flexтело и меняем направление на столбец (по умолчанию это строка, которая представляет собой горизонтальный макет). Кроме того, htmlи bodyпотребуется 100% высоты, чтобы заполнить весь экран.
Код html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
Теперь нам нужно отрегулировать, сколько места займет каждый раздел. Мы сделали это через flexсвойство, которое объединяет три гибких спецификации в одну:
flex-grow - определяет, сколько свободного пространства в контейнере уходит на элемент.
flex-shrink - насколько элемент будет сжиматься, когда не хватает места для всего.
flex-based - размер по умолчанию для элемента.
Мы хотим, чтобы наш верхний и нижний колонтитулы занимали столько места, сколько им нужно, а все остальное должно быть зарезервировано для основного раздела контента. CSS для такого макета выглядит следующим образом:
Код header{
/* Мы хотим, чтобы заголовок имел статическую высоту,
он всегда будет занимать столько места, сколько ему нужно. */
/* 0 flex-grow, 0 flex-shrink, авто флекс-базис */
flex: 0 0 auto;
}
.main-content{
/* При установке flex-grow до 1 основное содержимое будет занимать
все оставшееся место на странице.
Другие элементы имеют flex-grow: 0 и не будут оспаривать свободное пространство. */
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* Как и заголовок, нижний колонтитул будет иметь статическую высоту - он не должен увеличиваться или уменьшаться. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
Чтобы увидеть эту технику в действии, проверьте нашу демонстрационную страницу, нажав на изображение ниже. Используя большую розовую кнопку, вы можете изменить объем контента, чтобы помочь вам наблюдать за тем, как макет адаптируется и постоянно перемещает нижний колонтитул вниз.
Вывод:
Как видите, flexbox является мощным союзником при создании макетов с нуля. Все основные браузеры поддерживают его, за некоторыми небольшими исключениями, поэтому его довольно безопасно использовать во всех проектах.
Демонстрация
| | Страна: (RU) |
| |
