时间戳

首页 > 解决方案 > Angular Flex 布局 - 简单布局（页眉、容器、页脚）

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

问题描述

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

我的 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>

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

标签： angularcssflexboxangular-flex-layout

解决方案

推荐阅读