Выравнивание контента div по нижнему краю в CSS

Быстрый ответ

Сразу к делу: выравниваем содержимое по нижнему краю div с помощью Flexbox. Устанавливаем для div следующие свойства display – flex, flex-direction – column, justify-content – flex-end. Все применяемые дочерние элементы автоматически выровняются по нижнему краю.

.div-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%; /* Наше 100-этажное здание */
}

Интегрируем это в HTML:

<div class="div-bottom">
  <p>Содержимое, расположенное внизу</p>
</div>

Этот укромный подход гарантирует нижнюю регулировку с минимальным кодом и отлично срабатывает во всех современных браузерах.

Практические вариации

Рассмотрим обзор разных методов, которые позволят располагать содержимое в нижней части div:

Абсолютное позиционирование

Желаете точно расположить элемент в нижней части? Присвойте дочернему элементу position: absolute;. Учтите, что родительский контейнер должен иметь position: relative; в качестве базы.

.parent {
  position: relative;
  min-height: 200px; /* Большие ноги у родителя */
}

.child {
  position: absolute;
  bottom: 0;
  left: 0; /* Крайне левый помощник */
}

Подробнее об этом расскажет наш спикер на видео

Невидимый выравниватель

Невидимый div-выравниватель, оформленный с помощью display: inline-block и vertical-align: bottom, поможет буквально сбросить ваше содержимое вниз, независимо от особенностей браузеров или их размеров.

<div class="parent">
  <div class="aligner"></div>
  <div class="bottom-content">Содержимое, отдыхающее внизу</div>
</div>

.aligner {
  display: inline-block;
  vertical-align: bottom;
  width: 0px; /* Да, я стройный парень, но без меня не обойтись */
  height: 100%;
}

.bottom-content {
  display: inline-block;
  vertical-align: bottom;
}

Отображение ячейки таблицы

Кто сказал, что винтаж уже вышел из моды? Итак, вызываем старый добрый подход с использованием table-cell. display: table-cell; и vertical-align: bottom; обеспечат нижнее выравнивание без изысков CSS.

.table-parent {
  display: table; /* Все новое – это хорошо забытое старое! */
}

.table-child {
  display: table-cell;
  vertical-align: bottom;
}

Вертикальное центрирование

Если ваша задача – выровнять содержимое по центру, то на помощь придут CSS Grid или некоторые трюки с абсолютным позиционированием, испльзуемые с top и transform. Ваш результат? Впечатляющий и изящный!

Визуализация (готовте эмодзи!)

Если мы представим div как здание 🏢, его различные уровни как вертикальное пространство, то содержимое становится человеком (🧍), стремящимся вниз.

<div style="display: flex; flex-direction: column; justify-content: flex-end;">
  🧍 <!-- Наш ждущий у лифта человек -->
</div>

Flexbox в CSS служит нам кнопкой вниз в лифте (⬇️):

flex-direction: column; // Указываем вертикальное расположение этажей. justify-content: flex-end; // Билет до первого этажа.

И что мы получаем? Наш человек (содержимое) оказывается на подземном этаже:

🏢: [🔲, 🔲, 🔲, 🧍] // От крыши 🔲🔲🔲 до подвала 🧍

Работа с динамическим содержимым

На каждой вечеринке все двигаются, поэтому вашему динамическому содержимому может понадобиться провести несколько специфических упражнений:

Растем вместе со строем

Если у вас есть динамическое содержимое, которое ценит свободу, вставьте flex-grow: 1; во все ранее созданные соседние элементы. И что мы видим? Ваше содержимое движется вниз!

Матрица интерактивных элементов

Когда вас посетят интерактивные элементы, имейте в виду важность учета взаимодействия между слоями, чтобы обеспечить плавный пользовательский опыт.

Работа с уникальными сценариями

Для уникальных ситуаций необходимы уникальные решения:

Высота всего видимого экрана

Оставайтесь в форме при любом размере экрана, назначая высоту видимого экрана (в единицах vh) родительскому элементу.

Минимальная горизонтальная прокрутка

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

Распространенные ошибки

Переходим к разрыву с промахами:

Совместимость с браузерами

Если Flexbox или CSS Grid не ваши лучшие друзья, то выбирайте такие, которые ладят со всеми браузерами.

HTML должен быть семантичным

Несмотря на всё вышесказанное, не забывайте следить за тем, чтобы ваши HTML были чистыми и семантически правильными.

Не усложняйте

Когда дело доходит до решений, лучше просто и ясно. Старайтесь не усложнять всего, что можно решить с помощью меньшего количества кода.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks — Общее руководство по Flexbox.
2. Основные принципы Flexbox – CSS: Cascading Style Sheets | MDN — Материалы MDN окунут вас в искусство использования Flexbox.
3. Позиционирование в CSS — Урок о позиционировании CSS, который поможет разместить содержимое вниз.
4. Полное руководство по CSS Grid | CSS-Tricks — Исчерпывающее руководство по CSS Grid, собрате Flexbox.
5. Шпаргалка Flexbox — Быстрая шпаргалка со всеми памятными моментами Flexbox.
6. html – Как могу я вертикально выровнять элементы в div? – Stack Overflow — Полезное обсуждение на Stack Overflow о тонкостях вертикального выравнивания в div.