Angular Flex布局-简单布局（页眉，容器，页脚）

Question

我想要一个带有页眉，容器和页脚的简单布局。

我的HTML代码如下：

<div fxLayout="column">
  <header style="background-color: lightblue; height: 20px">
    Header
  </header>
  <div class="container" fxLayout="row" fxFlex="100">
    <div style="background-color: red" fxFlex="1 1 auto"></div>
    <div style="background-color: blue" fxFlex="5 1 auto"></div>
    <div style="background-color: green" fxFlex="2 2 auto"></div>
    <div style="background-color: maroon; height: 200px" fxFlex="1 1 auto"></div>
  </div>
  <footer style="height: 40px; background-color: yellow">Footer</footer>
</div>

但是我喜欢垂直拉伸容器。页脚应位于屏幕的底部。你能帮我吗？