Угловая 2 гибкая макет высота 100%

Question

Угловое приложение, использующее конструкцию материалов и гибкую компоновку. https://github.com/angular/flex-layout

Я пытаюсь создать простой макет страницы из 2-х столбцов сверху (left = fill, right = 10%), за которым следует одна строка в нижней части экрана. Элементы по-прежнему заполняют только вертикальное пространство, необходимое для содержимого. Единственный способ, которым я нашел это, - установить вручную высоту до 100%. Так я должен это делать? Что не так с этим html?

<div fxLayout="column"> 
    <div fxLayout="row" fxFlex="90%"> 
    <div fxFlex="80%" class="border"> 
     <p>Stuff is happening here</p> 
    </div> 
    <div fxFlex="20%" class="border"> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     </ul> 
    </div> 
    </div> 
    <div fxLayout="row" fxFlex="10%" class="border"> 
    <p>Bottom element</p> 
    </div> 
</div> 

Результат:

Answer 1

высота Установка на 100%, вероятно, путь действительно. Высота динамична, поэтому она будет адаптироваться к вашему контенту. В вашем случае контент не заполняет страницу, так что это нормальное поведение.

Что не так с этим решением?