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

Question

Скажите, у меня есть следующий код CSS и HTML:

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

Раздел заголовка имеет фиксированную высоту, но содержимое заголовка может измениться. Я бы хотел, чтобы содержимое заголовка было выровнено по вертикали к нижней части раздела заголовка, поэтому последняя строка текста «прилипает» к нижней части раздела заголовка.

Так что, если есть только одна строка текста, это будет выглядеть так:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

А если бы было три строки:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

Как это можно сделать в CSS?

Answer 1

Относительное + абсолютное позиционирование - ваша лучшая ставка:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

Но у вас могут возникнуть проблемы с этим. Когда я попробовал это, у меня были проблемы с выпадающими меню, появляющимися под контентом. Это просто не красиво.

Честно говоря, для проблем вертикального центрирования и, ну, в общем, любые проблемы с вертикальным выравниванием элементов не фиксированной высоты, проще использовать таблицы.

Пример: Можете ли вы сделать этот макет HTML без использования таблиц?

Answer 2

Использовать позиционирование CSS.

/* creates a new stacking context on the header */
#header {
  position: relative;
}

/* positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

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

<span id="header-content">some header content</span> 

<div style="height:100%; position:relative;">                                              
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div> 

Answer 3

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

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

Answer 4

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

Родительскому элементу необходимо установить тип отображения flex

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

Затем вы устанавливаете дочерний элемент align-self в flex-end.

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

Вот ресурс, который я использовал для изучения: http://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /

Answer 5

Поработав с этой же проблемой в течение некоторого времени, я наконец-то нашел решение, отвечающее всем моим требованиям:

• Не требует, чтобы я знал высоту контейнера.
• В отличие от относительных + абсолютных решений, контент не плавает в своем собственном слое (т.е. он обычно встраивается в контейнерный элемент div).
• Работает в разных браузерах (IE8 +).
• Простота реализации.

Решение просто занимает один <div>, который я называю «выравнивателем»:

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

HTML

<div class="bottom_aligner"></div>
... Your content here ...

Этот трюк работает, создавая высокий, тощий div, который выдвигает базовую линию текста к основанию контейнера.

Вот полный пример, который достигает того, о чем просил ОП. Я сделал "bottom_aligner" толстым и красным только для демонстрационных целей.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

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

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Answer 6

Современный способ сделать это - использовать flexbox . Смотрите пример ниже. Вам даже не нужно переносить Some text... в любой HTML-тег, поскольку текст, непосредственно содержащийся в flex-контейнере, обернут в анонимный flex-элемент.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Если есть только какой-то текст, и вы хотите выровнять по вертикали дно контейнера.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

Answer 7

Встроенные или встроенные элементы блока могут быть выровнены по низу элементов уровня блока, если высота строки родительского / блочного элемента больше, чем у встроенного элемента. *

разметка:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

CSS:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* убедитесь, что вы находитесь в стандартном режиме

Answer 8

display: flex;
align-items: flex-end;

Answer 9

Вы можете просто достичь изгиба

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Answer 10

Если у вас есть несколько элементов динамической высоты, используйте значения отображения CSS таблицы и ячейки таблицы:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

Я создал демо JSBin здесь: http://jsbin.com/INOnAkuF/2/edit

В демоверсии также есть пример того, как выровнять по центру по вертикали, используя ту же технику.