Как выровнять содержимое div по нижнему краю

Если вас не волнуют устаревшие браузеры, используйте flexbox.

Для этого родительскому элементу нужно установить свойство display в значение flex:

div.parent {
  display: flex;
  height: 100%;
}

Затем у дочернего элемента нужно задать align-self со значением flex-end:

span.child {
  display: inline-block;
  align-self: flex-end;
}

Вот ресурс, который я использовал для изучения данной темы:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Я использую такие свойства, и это работает!

#header {
  display: table-cell;
  vertical-align: bottom;
}

С помощью display: table-cell элемент ведёт себя как ячейка таблицы, а vertical-align: bottom позволяет выровнять содержимое по нижнему краю. Это может быть полезно для горизонтального размещения элементов с выравниванием по вертикали. Если у вас есть какие-либо вопросы по этому коду или нужен дополнительный контекст, не стесняйтесь спрашивать!

В этом CSS-коде используются свойства display: flex; и align-items: flex-end;, чтобы создать флекс-контейнер и выровнять его дочерние элементы по нижнему краю.

1. display: flex; — это свойство устанавливает текущий элемент как флекс-контейнер, позволяя его дочерним элементам располагаться в строку или столбец в зависимости от направления флекса.

2. align-items: flex-end; — это свойство определяет выравнивание флекс-элементов вдоль поперечной оси контейнера (в данном случае это вертикальная ось для строк). Значение flex-end выравнивает элементы по нижнему краю контейнера.

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

Я сталкивался с этой проблемой несколько раз, и могу сказать, что существуют как хорошие, так и не особо удачные решения. Для достижения желаемого результата можно использовать различные подходы: флексбокс, систему сеток или display: table. Лично я предпочитаю комбинировать флексбокс с margin-bottom: auto. Вот моя личная коллекция способов для выравнивания текста внизу:

1. Flex / margin-top: auto;

.parent {
  min-height: 200px;  
  background: green;
  display: flex;  
}  

.child {    
  margin-top: auto;
  background: red;
  padding: 5px;
  color: white;
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

2. Flex / align-self: flex-end

.parent {
  display: flex;
  min-height: 200px;  
  background: green;
}

.child {
  align-self: flex-end;
  background: red;
  padding: 5px;
  color: white;
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

3. Flex / align-items: flex-end;

.parent {
  min-height: 200px;  
  background: green;
  display: flex;       
  align-items: flex-end; 
}  

.child {  
  padding: 5px;
  background: red;
  color: white;  
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

4. Grid / align-self: end;

.parent {
  min-height: 200px;  
  background: green;  
  display: grid;  
}  

.child {  
  align-self: end;
  background: red;
  padding: 5px;
  color: white;  
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

5. Table / vertical-align: bottom;

Лично мне не нравится подход с таблицей.

.parent {
  min-height: 200px;  
  background: green;  
  display: table;
  width: 100%;
}  

.child {
  display: table-cell;
  vertical-align: bottom;
  background: red;
  padding: 5px;
  color: white;  
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

С использованием spacer

6. Flex / flex: 1;

.parent {
  min-height: 200px;  
  background: green;  
  display: flex;
  flex-flow: column;
}  

.spacer {
  flex: 1;    
}

.child {
  padding: 5px;
  background: red;
  color: white;
}

<div class="parent">  
  <div class="spacer"></div>
  <div class="child">Bottom text</div>  
</div>

7. Flex / flex-grow: 1;

.parent {
  min-height: 200px;  
  background: green;  
  display: flex;
  flex-direction: column;
}  

.spacer {
  flex-grow: 1;
}

.child {  
  padding: 5px;
  background: red;
  color: white;
}

<div class="parent">  
  <div class="spacer"></div>
  <div class="child">Bottom text</div>  
</div>

8. Inline-block / PseudoClass::before

.parent {
  min-height: 200px;  
  background: green;  
}

.child::before {
  display: inline-block;
  content: '';
  height: 100%;
  vertical-align: bottom;  
}

.child {  
  height: 200px;
  padding: 5px;
  background: red;
  color: white;  
}

<div class="parent">
  <div class="child">Bottom text</div>  
</div>

❤️ Лично мои предпочтительные варианты: 1., 2. и 3.

Да, элементы inline или inline-block действительно могут быть выровнены по нижнему краю блочных элементов, если высота строки родительского/блочного элемента больше, чем высота строки самого встроенного элемента.

Вот пример, который демонстрирует это:

HTML:

<h1 class="alignBtm"><span>Я на дне</span></h1>

CSS:

h1.alignBtm {
  line-height: 3em; /* Высота строки блока */
}
h1.alignBtm span {
  line-height: 1.2em; /* Высота строки встроенного элемента */
  vertical-align: bottom; /* Выровнять по нижнему краю */
}

В этом примере мы задаем line-height для тега <h1> равным 3em, что дает ему большую высоту строки, чем высота строки <span>, которая равна 1.2em. Поэтому, при применении свойства vertical-align: bottom;, текст внутри <span> будет выровнен по нижнему краю своего родительского элемента <h1>.

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