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

1144   24  

24 ответов:

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

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

1150  
2017-09-20 14:21:41

использовать 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>
135  
2017-05-23 15:34:50

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

#header {
  display: table-cell;
  vertical-align: bottom;
}
102  
2016-02-09 12:32:52

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

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

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

затем вы устанавливаете выравнивание дочернего элемента в flex-end.

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

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

83  
2015-01-22 20:34:44

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

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

Align bottom content

62  
2016-05-26 15:27:46

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

разметка:

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

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

22  
2016-02-09 12:24:03

современный способ сделать это будет с помощью 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>
22  
2017-01-15 21:59:24 
display: flex;
align-items: flex-end;
17  
2017-04-24 07:53:07

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

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

3  
2016-02-09 12:32:06

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

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

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

надеюсь, что это помогает.

2  
2015-02-06 14:49:56

вот гибкий способ сделать это. Конечно, он не поддерживается 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  
2016-06-07 23:33:12

Вы можете просто достичь 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>
2  
2018-05-23 09:08:28

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

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

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

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

1  
2011-08-11 18:33:28

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

показать на codepen

1  
2014-07-12 10:28:33

работает:

HTML: Я на дне

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}
1  
2016-02-22 21:17:50

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

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

}
1  
2016-11-09 11:42:44 
#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>
1  
2017-10-23 03:41:23

вот еще одно решение с помощью flexbox, но без использования flex-end для выравнивания по низу. Идея состоит в том, чтобы установить margin-bottom on 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>
1  
2017-12-29 00:01:09

очень простое, однострочное решение-добавить линейную высоту к 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

1  
2018-02-01 15:17:23

попробуйте с помощью:

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

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

0  
2013-01-21 05:51:55

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

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

0  
2013-05-30 10:07:47

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

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

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}
0  
2016-02-09 12:29:03

работает:

#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 головоломок гораздо больше похоже на кодирование, чем нравится... Я просто люблю CSS. Это настоящее удовольствие, когда вы можете изменить весь макет (не нарушая его :) просто изменив один параметр.

-3  
2013-01-04 16:44:31

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

добро пожаловать

-8  
2015-01-11 00:56:34

Comments

    Ничего не найдено.
Click here to cancel reply.