Flexbox и вертикальная прокрутка в приложении полной высоты с использованием NEWER Flexbox API
Я хочу использовать приложение в полный рост, используя flexbox. Я нашел то, что я хочу, используя старый flexbox (display: box; и другие) в этой ссылке:CSS3 Flexbox полноразмерное приложение и переполнение
Это правильное решение для старой версии свойств flexbox css.
Если я хочу попробовать использовать более новые свойства flexbox, япопробую использовать второе решение в той же ссылке, но "взлом» Flexboxиспользуя контейнер с высотой: 0px; Это делает, чтобы показать вертикальную прокрутку.
Я неэто очень нравится, потому что это создает другие проблемы иэто скорее обходной путь чем решение.
Я подготовил jsfiddle с базовым примером:http://jsfiddle.net/ch7n6/
#container {
display: -webkit-flex;
-webkit-flex-direction: column;
height: 100%;
}
#container article {
-webkit-flex: 1 1 auto;
overflow-y: scroll;
}
Это "полноразмерная html-сеть " и нижний колонтитул находятся внизу из-за flexbox элемента содержимого. Я предлагаю вам переместить панель между кодом CSS и результатом для имитации разной высоты.