| Kosten | Суббота, 07 Декабря 2019, 03:20 | Сообщение 1 |
| Привести нижний колонтитул в конец страниц с редким содержанием, что каждый веб-разработчик пытался решить в какой-то момент своей карьеры. И, по большей части, это решенная проблема. Однако все существующие решения имеют один существенный недостаток, что не работают, если высота вашего нижнего колонтитула неизвестна.
Flexbox идеально подходит для решения подобных задач. Несмотря на то, что Flexbox в основном известен тем, что размещает контент в горизонтальном направлении, он на самом деле работает также и для задач вертикального размещения. Все, что вам нужно сделать, это обернуть вертикальные секции в гибкий контейнер и выбрать, какие из них вы хотите расширить. Они автоматически займут все доступное пространство в своем контейнере.
В приведенном ниже примере для контейнера задана высота окна, и область содержимого должна расширяться по мере необходимости.
Примечание: в вертикальном направлении вам необходимо указать высоту контейнера. Это отличается от горизонтального направления, которое автоматически расширяется, чтобы соответствовать.
HTML
Код <body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
CSS
Код .Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
При разработке веб-сайтов в какой-то момент, вероятно, можно столкнуться с такой задачей как прижатие футера к низу страницы, в этой статье мы разберем как это сделать, используя flexbox.
Итак, чтобы в CSS прижать футер, flexbox-модель становится самым лучшим вариантом. На нашей простой странице для демонстрации будет заголовок, основной раздел и нижний колонтитул.
Код <body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
Чтобы включить модель flex, мы добавляем display: flex в тело и изменяем направление в столбец (по умолчанию это строка, которая является горизонтальной компоновкой). Кроме того, html и body потребуют 100% высоты с целью заполнения всего экрана.
Код html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
После этого нужно настроить, какое количество места займет каждый раздел. Мы добились этого благодаря свойству flex, которое объединяет три гибких спецификации в одну:
- flex-grow — определяет, сколько свободного места в контейнере переходит к элементу;
- flex-shrink — определяет, насколько будет сокращаться элемент, когда для всего не будет достаточно места;
- flex-basis — размер для элемента, установленный по умолчанию.
Мы хотим, чтобы наш верхний и нижний блоки занимали такое количества места, какое им нужно, и все остальное было зарезервировано для основного раздела контента. Для такого макета, чтобы через CSS прижать футер (flexbox), все выглядит следующим образом:
Код header{
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* 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;
}
Чтобы увидеть эту технику в действии, ознакомьтесь с нашей демонстрационной страницей в конце страницы. Используя большую розовую кнопку, вы можете изменить количество контента, чтобы понаблюдать за тем, как макет адаптируется.
Разве вы просто ненавидите его, когда создаете этот замечательный дизайн, созданный для большого количества контента, и затем наталкиваетесь на страницу, на которой просто нет контента, чтобы переместить нижний колонтитул до самого конца страница.
See the Pen
Footer gap! by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Суббота, 07 Декабря 2019, 03:27 | Сообщение 2 |
|
| Это никоим образом не умаляет ссылочный пост, это очень хорошо объяснено и, на мой взгляд, более элегантно, чем с flexbox. Я просто хочу объяснить, что с flexbox это так же просто, как и с grid, поэтому, если по какой-то причине вы не можете использовать grid, вы не уклонитесь от реализации его с flexbox.
Сохранение нижнего колонтитула внизу с помощью CSS Flexbox
Я буду использовать тот же HTML, что и в указанной статье:
Код <html> <body> <article> <header> </header> <main> </main> <footer> </footer> </article> </body> </html>
А вот CSS, чтобы поместить нижний колонтитул внизу:
Код html, body {
width: 100%;
height: 100%;
}
article {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
main {
flex-grow: 1;
}
header, main, footer {
flex-shrink: 0;
}
На контейнере мы устанавливаем flexbox для выравнивания содержимого в столбце. Элементы должны растягиваться так, чтобы они охватывали всю ширину, а не только ширину, которую занимает их содержимое.
| | Страна: (RU) |
| |
