Допустим, у меня есть следующий код 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?
Относительное+абсолютное позиционирование - ваш лучший выбор:
#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-макет без использования таблиц?
Используйте позиционирование 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;
}
Как заметил cletus, чтобы это работало, вам нужно определить header-content.
<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.parent {
display: flex;
height: 100%;
}
Затем установить дочерний элемент'ы выровнять-самостоятельно изогнуть конец.
span.child {
display: inline-block;
align-self: flex-end;
}
Здесь's ресурс я использовал, чтобы узнать: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
После борьбы с этой же проблемой в течение некоторого времени, я, наконец, нашел решение, которое отвечает всем моим требованиям:
Решение просто в <див>
, который я называю "в каппу и":
<б>Усс</б>
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
<б>в HTML</б>
<div class="bottom_aligner"></div>
... Your content here ...
Этот трюк работает путем создания высоких худощавых див, который сдвигает текст базовой линии до нижней части контейнера.
Вот полный пример, который добивается того, что ОП просил. Я'ве сделал и"bottom_aligner на" толстый и красный только для демонстрационных целей.
Усс:
.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>
!Выровнять дно Содержание]1
Современный способ сделать это будет с помощью основе. Смотрите пример ниже. Вы Don'т даже нужно обернуть `какой-то текст... в любой тег html, с текстом напрямую, содержащиеся в контейнер обернут в анонимную элемент гибкого трубопровода.
в
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>
в
display: flex;
align-items: flex-end;
Встроенные или инлайн-блочные элементы можно выровнять по нижней части элементов уровня блока, если строка-высота родительской/блочного элемента больше, чем у встроенного элемента.*
разметка:
<h1 class="alignBtm"><span>I'm at the bottom</span></h1>
Усс:
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>
в
Если у вас есть несколько, динамические предметы по высоте, использовать значения 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>
УСБ
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
Демо также есть пример, как по вертикали, выравнивание по центру, используя ту же технику.
Вот еще одно решение с использованием адаптируемых блоков, но без использования флекс-конец для выравнивания по низу. Идея в том, чтобы установить маржа-дно
на Н1 в авто давить оставшееся содержимое до дна:
в
#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>
в
Мы также можем сделать то же самое с маржи-топ:Autoв тексте, но в данном случае мы должны поместить его внутри
дивили
пядь`:
в
#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, имея в виду, что все элементы div'ы, текст будет идти снизу.
Усс:
#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
Здесь'ы флекси способ сделать это. Конечно, это's не поддерживается в 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;
}
Вы Don'т нужна абсолютная+по отношению к этому. Это очень возможно, использовать относительные установки для контейнера и данных. Это, как вы делаете это.
Предположим высоту ваших данных будет "х". Ваш контейнер является относительным и футер тоже относительны. Все, что вам нужно сделать, это добавить к вашим данным
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);
}
Надеюсь, что это помогает.
Я нашел это решение bassed на начальной загрузки по умолчанию шаблону
/* 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;
}
если бы вы могли задать высоту див оборачивать контент (заголовок-контент#, как показано в других's ответ), а не весь заголовок#, может быть, вы тоже можете попробовать такой подход:
В формате 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>
УСБ
#header-content{
height:100px;
}
#header-content::before{
display:inline-block;
content:'';
height:100%;
vertical-align:bottom;
}
#header-content span{
display:inline-block;
}
в <а href="и http://codepen.io/codeboyim/pen/pGxcs" и GT;показывают, на сайт CodePen</а>
#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-код: <Н1 класс="и alignBtm" и><жизненный период>Я'м на дне</службы></Н1>
Усс:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
Все эти ответы и ни один не работал для меня... я'м не эксперт адаптируемых блоков, но это достаточно легко выяснить, это простой и легкий для понимания и использования. Чтобы отделить что-то от остального содержимого, вставить пустой div и позволить ему расти, чтобы заполнить пространство.
``в CSS .myContainer { дисплей: флекс; высота: шириной 250 пикселей и следующий; колонки гибкого потока:; }
.заполнитель { гибкого трубопровода: 1 1; }
``
`в HTML <див класс="и myContainer" и> <див>топ</див> <див класс=то"наполнитель" и></див> <див>снизу</див> </див> ``
Это реагирует, как ожидалось, когда рельеф дна не фиксированного размера также, когда контейнер не фиксированного размера.
Я придумал способ, который намного проще, чем'ы были упомянуты.
Установить высоту заголовка элемента div. Затем внутри этого стиля вашему Н1
тег следующим образом:
float: left;
padding: 90px 10px 11px
Я'м работает на сайте для клиента, а дизайн требует текст, в нижней части определенный див. Я'вэ достигли результата, используя эти две строки, и она отлично работает. Кроме того, если текст не расширить, обивка останется прежним.