Как сверстать стопку из DIV-ов, один из которых должен занять всю свободную высоту?

Возникла задача по верстке, которую у меня не получается решить только HTML/CSS, без JS.

Итак.
1. Есть блок (#container) фиксированного размера, с заданными в пикселях шириной и высотой.
2. В блок вложены два: #top #main.
3. Оба по ширине занимают 100% родителя
4. В #top находится текст, который может занимать 1…3 строки. Это фиксируется в HTML-файле статически. Соответственно, высота будет разной.
5. При открытии HTML-файла #main должен занять всё оставшееся свободным пространство по высоте внутри родителя. При этом в #main может находиться контент, превышающий высоту даже всей страницы, т.е. нужен overflow: auto;

И в итоге я кроме как расчетами и втыканием инлайн стилей в js не могу сделать такую верстку. Даже табличной версткой не удалось.

N.B. Нельзя задать абсолютно высоту никому, кроме #container.

Есть идеи, коллеги?
  • Вопрос задан
  • 4470 просмотров
Решения вопроса 2
Satanpit
@Satanpit
Front-end developer
К сожалению, на CSS2 решения я не придумал.
На CSS3 это решается с помощью flex
Ответ написан
delch
@delch
Frontend developer
Не знаю, правильно ли я вас понял. Посмотрите такой пример codepen.io/anon/pen/kxuBq
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Пару вопросов:

1. Что такое - N.B. ?
2. И почему нельзя абсолют юзать на вложенные блоки?
Ответ написан
Ваш ответ на вопрос

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

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