Eugene_Sh
@Eugene_Sh

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

У нас есть родительский 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>

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

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

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

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

Есть какое-нибудь решение с использованием CSS?
  • Вопрос задан
  • 3190 просмотров
Пригласить эксперта
Ответы на вопрос 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, в котором и будет задана минимальная высота и будет располагаться текст, которого в случае если окажется больше - то все хорошо растянется.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы