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

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

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

ОТВЕТЫ

Ответ 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>

Ответ 2

Используйте позиционирование 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;
}

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

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

Ответ 3

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

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

Ответ 4

Если вас не беспокоят устаревшие браузеры, используйте 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/

Ответ 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>

Align bottom content

Ответ 6

Современный способ сделать это будет использовать 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>

Ответ 7

Элементы строкового или встроенного блока могут быть выровнены в нижней части элементов уровня блока, если высота строки элемента 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;
}

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

Ответ 8

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

Ответ 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>

Ответ 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

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

Ответ 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;
}

Ответ 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 bottom.</a>
</div>

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

Ответ 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);
}

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

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

Ответ 14

Вот еще одно решение с использованием flexbox, но без использования flex-end для выравнивания снизу. Идея состоит в том, чтобы установить 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>

Ответ 15

если вы можете установить высоту оберточного 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;
}

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

Ответ 16

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

HTML:   Я внизу

CSS

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

Ответ 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;

}

Ответ 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>

Ответ 19

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

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

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

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

Ответ 20

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

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

Ответ 21

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

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

Ответ 22

попробуйте:

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

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

Ответ 23

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

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

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

Ответ 24

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

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: [email protected]_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. Это настоящее удовольствие, когда вы можете изменить весь макет (не нарушая его:), просто изменив один параметр.

Ответ 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

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