Как сверстать стопку из 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.
@delch, я возможно не понял примера, но контент внутри второй строки таблицы должен иметь полосу прокрутки. Потому высота обеих строк таблицы не должна превышать заданную.
Пример с js: jsfiddle.net/kityan/h6pXq
@delch, когда я пробовал на таблицах сделать - всё упиралось в то, что контент внутри ячейки второй строки рвёт высоту, если его не ограничить абсолютно (или хотя бы саму ячейку). А это невозможно...
@delch, виноват, та же история. Я работаю в фоксе, а в хроме - даже первый ваш пример работает как надо! Спасибо. Только не пойму - почему в фоксе не хочет. И у меня не получалось на таблицах по той же причине.
1. N.B. - это ru.wikipedia.org/wiki/Nota_bene
2. Нельзя по следующей причине. Дизайнеры хотят выводить в верхний блок заголовки разной длины, что дает разное количество строк и соответственно высоту. Если я фиксирую высоту #top, при коротких заголовках будет отступ до #main. Они этого не хотят.
Далее, если фиксирую высоту #main, то он примыкает к #top, но при этом пляшет его нижний край. А этого тоже не хотят.
Простой
Средний
