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

Скажем, у меня есть следующий код 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 ?

1059
задан Peter Mortensen 19 July 2019 в 20:56
поделиться

3 ответа

Расположение Relative+absolute является Вашим лучшим выбором:

#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-разметку, не используя таблицы?

1243
ответ дан GKFX 20 July 2019 в 06:56
поделиться
  • 1
    Я был бы в состоянии использовать это для опроса обещаний? У меня есть набор сервисов, от которых я хотел бы опросить определенный метод. Вместо того, чтобы делать его ресурсом, я хотел бы просто опросить, например: MyService.someMethod () на равном интервале. Я мог сделать тайм-аут, но если бы я получаю Ошибку HTTP, которая была бы поймана в HTTPInterceptor, я хотел бы к паузе, опрашивающей, пока сервер назад не онлайн. – Patrick 15 April 2014 в 14:18

Расположение 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>
148
ответ дан Peter Mortensen 20 July 2019 в 06:56
поделиться

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

#header {
  display: table-cell;
  vertical-align: bottom;
}
112
ответ дан 19 December 2019 в 20:19
поделиться
Другие вопросы по тегам:

Похожие вопросы: