Как сделать два div'а в родителе, один сверху, другой снизу, если у родителя высота резиновая и имеет минимальное значение?

Question

[Eugene_Sh]

У нас есть родительский div (min-height: 150px; height: auto; ). В нем два div (height: auto;). Структура такая:

<div class="parent">
      <div class="child child1">Текст 1</div>
      <div class="child child2">Текст 2</div>
</div>

Нужно получить, что вроде этого:


Если сумма высоты внутренних div'ов меньше минимальной высоты, то первый div сверху, второй снизу, между ними пустое пространство. И нижний div, если растет по высоте, при наличии пустого пространства между внутренними div'ами - заполняет это пустое пространство.

Пробовал с position: relative (top: 0; bottom: 0;) - не получилось.

Остановился на этом jsfiddle.net/p9JeW/1

Есть какое-нибудь решение с использованием CSS?

Answer 1

[Виталий Желтяков]

Вам нужно это

Comments

[Eugene_Sh]

Нет, нет, нет, тут фиксированная высота. Высота первого и второго div - auto, т.е. растягивается по высоте. При наличии свободного пространства - он заполняет ее, если нет свободного пространства - он увеличивает высоту родителя.

[Виталий Желтяков]

@Eugene_Sh Тогда делайте таблицей. Ячейки таблицы умеют автоматически растягиваться в зависимости от контента и контейнера (table)

Answer 2

[Павел Логачев]

А что, "height: auto;" у вас работает?

Задайте div.parent {position:relative} - тогда все абсолютные блоки будут позиционироваться внутри него, а div.child {position:absolute;left:0;right:0;}
div.child1 {top:0;}
div.child2 {bottom:0;}

В итоге нет никаких фиксированных заданий высоты. Но только вы должны предусмотреть чтобы высота div.parent была всегда больше суммы высот div.child. А если в div.parent предполагается текст - то нужно будет задать отступы, равные div.child, чтобы текст под них не прятался.

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