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

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

1044 голосов
/ 25 февраля 2009

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

Ответы [ 25 ]

0 голосов
/ 21 января 2013

попробуйте с: 

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

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

0 голосов
/ 15 октября 2013

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

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

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}
0 голосов
/ 11 августа 2011

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

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

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

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

0 голосов
/ 16 мая 2019

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

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

0 голосов
/ 12 августа 2011

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

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

Страница:
...