Как выровнять содержимое 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?
30 ответов
Относительное + абсолютное позиционирование - ваша лучшая ставка:
#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 без использования таблиц?
Если вы не беспокоитесь о старых браузерах, используйте 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/
Используйте позиционирование 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>
Я использую эти свойства, и это работает!
#header {
display: table-cell;
vertical-align: bottom;
}
Поработав с этой проблемой в течение некоторого времени, я, наконец, нашел решение, которое отвечает всем моим требованиям:
- Не требует, чтобы я знал высоту контейнера.
- В отличие от относительных + абсолютных решений, контент не плавает в своем собственном слое (то есть он обычно встраивается в контейнерный элемент 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>
Современный способ сделать это - использовать 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>Я сталкивался с проблемой несколько раз, и есть хорошие решения, но есть и не очень хорошие. Таким образом, вы можете добиться этого разными способами с помощью flexbox, с помощью системы сетки или таблицы отображения. Мой предпочтительный вариант — это сочетание flex и «margin-bottom: auto». Вот моя личная коллекция возможностей text-bottom:
1. Flex/margin-top: авто;
❤️ Мои личные предпочтительные версии: 1., 2. и 3.
Элементы inline или inline-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;
}
* убедитесь, что вы находитесь в стандартном режиме
Вы можете просто добиться гибкости
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>Вы можете использовать следующий подход:
.header-parent {
height: 150px;
display: grid;
}
.header-content {
align-self: end;
}<div class="header-parent">
<h1>Header title</h1>
<div class="header-content">
Header content
</div>
</div>Вот еще одно решение с использованием flexbox, но без использования flex-end для выравнивания снизу. Идея состоит в том, чтобы установить margin-bottom на h1 до auto, чтобы перенести оставшееся содержимое вниз:
#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>Лучшее возможное решение для перемещения div вниз выглядит следующим образом. В основном, что вам нужно сделать, это установить отображение flex и flex-direction в качестве столбца для родительского элемента и добавить 'margin-top: auto' к его дочернему элементу, который необходимо переместить в нижнюю часть контейнера. Примечание: я использовал бутстрап и его классы.
Если у вас есть несколько динамических элементов высоты, используйте значения отображения 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
Демо также имеет пример того, как выровнять по центру по вертикали, используя ту же технику.
Все эти ответы, и ни один из них не сработал для меня... Я не эксперт по флексбоксам, но это было довольно легко понять, это просто и легко понять и использовать. Чтобы отделить что-то от остального содержимого, вставьте пустой 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>
Это реагирует, как и ожидалось, когда содержимое дна не имеет фиксированного размера, а также когда контейнер не имеет фиксированного размера.
Вот гибкий способ сделать это. Конечно, он не поддерживается 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;
}
Очень простое решение, состоящее из одной строки, состоит в том, чтобы добавить высоту строки в 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
Вам не нужен абсолютный + относительный для этого. Это очень возможно, используя относительное положение для контейнера и данных. Вот как ты это делаешь.
Предположим, что высота ваших данных будет 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);
}
Надеюсь это поможет.
В дополнение к другим упомянутым решениям flex-box:
Вы можете использовать
flex-grow: 1на первом див. Таким образом, ваш второй div будет выровнен по низу, а первый закроет все оставшееся пространство.
В родительском div вы должны использовать
display: flex и
flex-direction: column.
/* parent-wrapper div */
.container {
display: flex;
flex-direction: column;
}
/* first-upper div */
.main {
flex-grow: 1;
}
Проверить скрипку: https://jsfiddle.net/1yj3ve05/
Я знаю, что это более 2 лет, но я изобрел способ, который намного проще, чем было упомянуто.
Установите высоту заголовка div. Затем внутри этого стиля ваш тег H1 выглядит следующим образом:
float: left;
padding: 90px 10px 11px
Я работаю над сайтом для клиента, и дизайн требует, чтобы текст был в нижней части определенного div. Я добился результата, используя эти две строки, и он отлично работает. Кроме того, если текст расширяется, отступы останутся прежними.
Если бы вы могли установить высоту оберточного 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;
}
Кажется, работает:
HTML: я внизу
CSS:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
#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>Я нашел это решение на основе шаблона запуска начальной загрузки по умолчанию
/* 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;
}
Просто используйтеdisplay:flexиflex-direction:columnчтобы сделать дочернюю синхронизацию в вертикальном порядке, затем применитеjustify-content:space-betweenчтобы оправдать высоту родительского div с его дочерним содержимым. чтобы вы могли достичь своей цели. Попробуйте этот фрагмент, чтобы решить проблему.
Я очень ценю ваш интерес.
Сайт, который я только что сделал для клиента, запросил, чтобы текст нижнего колонтитула был верхним полем, а текст внизу, которого я достиг с помощью простого заполнения, должен работать для всех браузеров.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
Попробуйте с:
div.myclass { margin-top: 100%; }
попробуйте изменить%, чтобы исправить это. Пример: 120% или 90% ... и т. Д.
Кажется, работает:
#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. Это очень приятно, когда вы можете изменить весь макет (не нарушая его:), просто изменив один параметр.
Идеальный кросс-браузерный пример, вероятно, вот этот:
http://www.csszengarden.com/?cssfile=/213/213.css&page=0
Идея состоит в том, чтобы как отображать div внизу, так и делать его там. Часто простой подход заставляет липкий div прокручиваться вверх с основным содержанием.
Ниже приведен полностью рабочий минимальный пример. Обратите внимание, что не требуется хитрость для встраивания в div. Многие BR просто заставляют появиться полосу прокрутки:
<!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. Кроме того, это должен быть первый тег, и над ним ничего не должно появляться.
Решение 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
пожалуйста