Как выровнять содержимое 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;
}

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

<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/snippets/css/a-guide-to-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, который перемещает базовую линию текста в нижнюю часть контейнера.

Вот полный пример, который обеспечивает то, о чем просил OP.Я сделал "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

Современным способом сделать это было бы использование гибкий ящик.Смотрите пример ниже.Вам даже не нужно заворачивать 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

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

Answer 8

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

разметка:

<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 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 значения table и table-cell:

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

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

Answer 11

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

Тем не менее, было бы неплохо, если бы существовал способ сделать это без внешнего контейнера, просто выровняйте текст внутри самого себя.

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

Answer 12

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

CSS - файл:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

имейте в виду, что это практичное и быстрое решение, когда вы просто хотите, чтобы текст внутри div опускался, если вам нужно объединить изображения и прочее, вам придется закодировать немного более сложный и адаптивный CSS

Answer 13

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

Предположим, высота ваших данных будет составлять x.Ваш контейнер относителен, и нижний колонтитул тоже относителен.Все, что вам нужно сделать, это добавить к своим данным

bottom: -webkit-calc(-100% + x);

Ваши данные всегда будут находиться в нижней части вашего контейнера.Работает, даже если у вас есть контейнер с динамической высотой.

HTML будет выглядеть следующим образом

<div class="container">
  <div class="data"></div>
</div>

CSS будет выглядеть следующим образом

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Живой пример здесь

Надеюсь, это поможет.

Answer 14

Вот другое решение, использующее flexbox, но без использования гибкий конец для выравнивания дна.Идея состоит в том, чтобы установить margin-bottom на h1 Для авто чтобы вытолкнуть оставшееся содержимое на дно:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

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

Мы также можем сделать то же самое с margin-top:auto на текст, но в этом случае нам нужно обернуть его внутри div или span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

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

Answer 15

если бы вы могли установить высоту оберточного div содержимого (#header-содержимое, как показано в ответе другого) вместо всего # header, возможно, вы также можете попробовать этот подход:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS - файл

#header-content{
    height:100px;
}

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

#header-content span{
    display:inline-block;
}

показать на codepen

Answer 16

Кажется, работает:

HTML:Я нахожусь на самом дне

css - файл:

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

Answer 17

Я нашел это решение, основанное на шаблоне начальной загрузки по умолчанию

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

Answer 18

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

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

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

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

Answer 19

Все эти ответы и ни один из них не сработал для меня...Я не эксперт по flexbox, но это было достаточно легко выяснить, это просто и доступно для понимания и использования.Чтобы отделить что-то от остального содержимого, вставьте пустой div и дайте ему увеличиться, чтобы заполнить пространство.

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

Это реагирует, как и ожидалось, когда содержимое дна не имеет фиксированного размера, а также когда контейнер не имеет фиксированного размера.

Answer 20

Я разработал способ, который намного проще того, что было упомянуто.

Установите высоту заголовка div.Затем внутри этого создайте свой H1 пометьте следующим образом:

float: left;
padding: 90px 10px 11px

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

Answer 21

попробуйте с:

div.myclass { margin-top: 100%; }

попробуйте изменить %, чтобы исправить это.Пример:120% или 90% ... и т.д.

Answer 22

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

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

Answer 23

Идеальным кроссбраузерным примером, вероятно, является вот этот:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

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

Ниже приведен полностью рабочий минимальный пример.Обратите внимание, что никаких хитростей с внедрением div не требуется.Многие BRS предназначены только для того, чтобы заставить появиться полосу прокрутки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

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

Answer 24

Кажется, работает:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Используя Меньше делает решение CSS-головоломок гораздо более похожим на кодирование, чем на like...Я просто обожаю CSS.Это настоящее удовольствие, когда вы можете изменить весь макет (не нарушая его :), просто изменив один параметр.

Answer 25

решение 2015 года

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

ваше приветствие