Flex Item即使内容为空也有特定的高度

Question

我目前正在为以下代码使用 angular flexbox。

我想让中间的弹性项目（div，更具体地说）有一个特定的高度，即使它的内容是空的。

解决方案应该包括使用纯粹的弹性属性来提供高度，除非这是不可能的。

<div fxLayout="column"  style="height:100vh">
  <header style="background-color: lightblue;" >
        Header
  </header>
  <div style="background-color: orange;"  >

  </div>
  <footer style="background-color: yellow"> Footer </footer>
</div>

Answer 1

您可以向它添加 fxFlex 以给它一个高度，这应该可以工作，因为它位于具有固定高度的列 div 内（您可以调整 fxFlex 中的值以适合您的需要）。

<div fxFlex="50" style="background-color: orange;">
</div>

您还可以在同一个 div 上使用 fxFill 来填充所有可用的 space:

<div fxFill style="background-color: orange;">
</div>

来源：https://tburleson-layouts-demos.firebaseapp.com/#/docs

Answer 2

<div fxLayout="column"  style="height:100vh">
  <header style="background-color: lightblue;" >
        Header
  </header>
  <div style="background-color: orange;" fxFlexFill>

  </div>
  <footer style="background-color: yellow"> Footer </footer>
</div>

fxFlexFill 指令应用于 fxLayout 容器内的元素，并标识其宽度和高度应最大化的元素

Flex Item即使内容为空也有特定的高度

Flex Item to have specific height even when empty content

html

angular

angular-material

angular-flex-layout