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

879

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

Теги:
vertical-alignment

21 ответ

1042
Лучший ответ

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

#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 без использования таблиц?

Поделиться
  • 4
    Я действительно нашел это решение, прежде чем спрашивать здесь, но как-то забыл добавить позицию: относительный; до заголовка div, и контент продолжал приземляться внизу страницы. Спасибо
  • 14
    Вы можете управлять своей выпадающей позицией с помощью свойства z-index, чтобы вывести ее на передний план. Помните, что свойство z-index работает с элементами, расположенными относительно или абсолютно. Кроме того, семантически неверно использовать таблицу для достижения результатов компоновки.
Показать ещё 9 комментариев
134

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

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

/* positions header-content at the bottom of header 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>
Поделиться
  • 4
    к вашему сведению ... это привело к тому, что содержимое моего заголовка свернулось по ширине, поэтому мне пришлось добавить width = '100%' к содержимому заголовка
  • 2
    @dsdsdsdsd Вы также можете это исправить, добавив display: block к # header-content.
Показать ещё 2 комментария
91

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

#header {
  display: table-cell;
  vertical-align: bottom;
}
Поделиться
  • 41
    Не поддерживается в IE8 и более ранних версиях. Это поддерживается в IE9.
  • 26
    Не смотрит на работу в Chrome: /
Показать ещё 11 комментариев
58

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

  • Не требует, чтобы я знал высоту контейнера.
  • В отличие от относительных + абсолютных решений, контент не плавает на своем собственном слое (т.е. он обычно встраивается в контейнер 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>

Изображение 2604

Поделиться
  • 0
    Почти идеально :), но не допускает автоматических разрывов строк.
  • 1
    Хороший код, я сделал с ним JSFiddle : jsfiddle.net/b48xs5r2
Показать ещё 4 комментария
56

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

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

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

Затем вы устанавливаете дочерний элемент align-self для гибкого конца.

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

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

Поделиться
  • 2
    Я не могу заставить его работать ... codepen.io/anon/pen/rgldC?editors=110
  • 0
    @bafromca, две причины, которые не работают. 1: используйте «align-self» вместо align-items (моя ошибка, я отредактировал свой оригинальный пост). 2: высота 100% не будет работать, если родитель не имеет высоты.
Показать ещё 2 комментария
22

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

Разметка:

<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;
}

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

Поделиться
14

Современный способ сделать это будет использовать flexbox. См. Пример ниже. Вам даже не нужно обертывать Some text... в любой тег HTML, поскольку текст, содержащийся в контейнере 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>
Поделиться
  • 1
    Мне нужно, чтобы мой выровненный снизу элемент все еще присутствовал в потоке документов, что невозможно при использовании position:absolute; , Это решение отлично сработало для моего случая!
  • 1
    Внутри реагируют компоненты, это правильное решение. Принятое решение не удается.
Показать ещё 1 комментарий
10 
display: flex;
align-items: flex-end;
Поделиться
  • 2
    Обратите внимание, что flexbox не очень хорошо поддерживается в старых браузерах.
  • 9
    @AnthonyB - определить старое? Мы должны изменить эту запись как разработчики. Технология движется вперед, а старые просто не выживают. IE9 и 10 имеют проблемы с flex, как я вижу, но они были выпущены в 2011 и 2012 годах соответственно ... это 2017 год. Мы должны отпустить эти устаревшие и сломанные браузеры. Если не для визуального удовлетворения, но для безопасности и общих обновлений программного обеспечения.
Показать ещё 2 комментария
3

Если у вас несколько элементов динамической высоты, используйте значения отображения в таблице таблицы и таблицы: 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

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

Поделиться
2

Вот сгибательный способ сделать это. Конечно, он не поддерживается 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;
}
Поделиться
2

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

Предположим, что высота ваших данных будет 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);
}

Здесь показан живой пример

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

Поделиться
  • 1
    Вы должны упомянуть поддержку браузера
  • 0
    Можете объяснить, что такое bottom: -webkit-calc(-100% + x); делается?
Показать ещё 1 комментарий
2

если вы можете установить высоту оберточного div содержимого (# header-content, как показано в другом ответе), вместо всего #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;
}

показать в кодефане

Поделиться
2

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

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

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

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

Поделиться
1

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

HTML:   Я внизу

CSS

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}
Поделиться
1

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

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

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}
Поделиться
  • 1
    Ваше первое объявление padding: 0 30px немного избыточно, вы также можете поместить padding: 30px затем остальные 2 объявления.
  • 0
    Абсолютно верно, однако я следую практике моего рабочего места.
Показать ещё 1 комментарий
1

попробуйте:

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

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

Поделиться
  • 0
    Прекрасно работает с 1 набором контента, но его нужно будет скорректировать, если контент меняется. Если это динамический контент, то не используйте это!
0 
#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>
Поделиться
0

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

/* 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;

}
Поделиться
0

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

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

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

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

<!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. Кроме того, это должен быть первый тег, и над ним ничего не должно быть.

Поделиться
  • 28
    Поскольку вы объявляете свой документ строгим XHTML, вам также следует самостоятельно закрыть теги <br /> ...
  • 7
    @ KarlKildén, если вы ссылались на комментарий от aaamos, он, безусловно, не является глупым комментарием - обработка указанного выше документа с правильным заголовком content-type приведет к тому, что браузер выдаст ошибку синтаксического анализа xml.
Показать ещё 1 комментарий
-3

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

#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;
}

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

Поделиться
-7

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

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

Поделиться
  • 3
    Расположение таблицы для этого может быть проблематичным; CSS рекомендуется вместо этого. Свойство valign также не поддерживается в HTML5. (см. w3schools.com/tags/att_td_valign.asp )

Ещё вопросы

Сообщество Overcoder
Наверх
Меню