Имеется колонна, высотой в 100% станицы. Сама страница то же 100%. В Колонне порядка десятка блоков высотой менее 10% (ну чтобы поместилось друг под другом и чуть чуть осталось на отступы :).
Хочется распределить эти блоки по всей высоте колонны.
Аналоги по горизонтали это способы типа text-align: justify + инлайновые потомки или display: table + display table-cell; А вот какой подход использовать по вертикали мне в голову что-то не приходит.
Условия и ситуации
Основной критерий классифицирующий ситуации - это количество блоков. Тут два варианта: либо количество блоков известно (будем брать 10 для примера), либо не известно. Но во втором случае можно говорить о том, что количество блоков не убегает далеко от 10-ти.
- Количество блоков известно. Создаем список высотой в 100%. Элементам списка выставляем высоту в 10%. Внутри вертикальное выравнивание и один из блоков. Тут все понятно.
- Количество блоков не известно. Высота блока известна.
- Количество блоков не известно. Высота блока неизвестна.
- Количество блоков не известно. Высота блока неизвестна. Требуется, чтобы при уменьшении высоты страницы, по достижению предела (когда блоки уже вплотную сели друг на друга) появлялся вертикальный скролл в окне браузера и страница переставала сжиматься.
Давайте обсудим :) У кого какие мысли по 2-4?.
P.S. Можно на уровнее идей. Код я набью, когда что-нибудь придумаем.
UPD: Cпособ с display: table я зря сразу откинул. Он одинакого хорошо подходит как для пропорционального выравнивания по горизотали, так и по вертикали. Во втором случае не обойтись без display: row; и, следовательно, лишнего тэга, но результат того стоит. Плюс легко использовать вертикальное выравнивание уже внутри клетки для блока.