Сьогодні зіткнувся з неприємною проблемою - при блокової верстці знадобилося розтягнути блок на порожній простір батьківського елемента по вертикалі (div expand). Природно, по горизонталі ніякої труднощі немає - просто задати відображення блоковим (display: block) і буде щастя =).
Але тут інше. Є батьківський div, в ньому три div'а (три колонки - середня - контент, праворуч і ліворуч - панелі). Виходить, що колонка з контентом може бути необмеженого розміру, і треба підлаштувати розмір бічних div'ов під неї (для чого? Наприклад, щоб банально змінити колір). Думав, height: 100% і щастя. Виявилося, все трохи складніше - при такому процентному вказівці висоти розмір діва буде просто видимий розмір вікна з усіма витікаючими наслідками.
У необхідного властивості (яке дозволяє вирішити поставлену задачу) немає єдиної підтримкою різними браузерами. Тому треба прописувати окремо для кожного. Ідея проста: для батьківського div'а треба задати display. який дозволить розтягування внутрішніх елементів (-moz-box. -webkit-box. -ms-flexbox - в залежності від браузера), а всередині блоку, який треба розтягнути задати значення -moz-flexbox. -webkit-flex-box. ms-flex. і т.д. (Теж в залежності від браузера).
Вільний простір батька ділиться на суму значень -moz-flex-box. -webkit-flex-box або ms-flex всіх безпосередніх нащадків і розподіляється між ними пропорційно їх значенням.
Наше завдання спрощена тим, що вертикально div'ов по одному.
Ось що вийшло: