即使内容为空，Flex 项目也具有特定的高度答案

【问题标题】：Flex Item to have specific height even when empty content即使内容为空，Flex 项目也具有特定的高度
【发布时间】：2020-05-15 00:03:49
【问题描述】：

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

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

解决方案应该涉及使用纯 flex 属性来给出高度，除非不可能。

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

【问题讨论】：

标签： html angular angular-material angular-flex-layout

【解决方案1】：

<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 容器中的元素，并标识应最大化宽度和高度的元素

【讨论】：

【解决方案2】：

您可以将 fxFlex 添加到它以赋予它一个高度，这应该可以工作，因为它位于具有固定高度的列 div 中（您可以使用 fxFlex 中的值来满足您的需要）。

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

您还可以在同一个 div 上使用 fxFill 来填充所有可用空间：

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

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

【讨论】：

对不起，我对我的代码做了一个小的修改。中间的 div 不应该有 fxLayout="row"。以避免混淆。已更新我的查询以反映这一点。
我尝试按照您的建议将 fxFlex 和 fxFill 放到中间 div。 Bt 中间的 div 根本不扩展。也许，您可以访问我上面提供的链接来运行并查看代码。然后尝试将您的解决方案应用于我的代码。单击保存，并提供 URL 以供我查看您的解决方案。
我认为您提供的 jsfiddle 没有安装 flex 布局，因为它不响应任何 flex 布局属性。当我使用检查元素时，我也没有看到任何 flex 布局类出现在元素上。
你是对的。我意识到 jsfiddle 没有弹性。难怪无论我最初如何尝试各种解决方案，它都行不通。哈哈...无论如何，我移动到另一个安装了 flex 的在线代码平台，并对其进行测试。是的，您的解决方案有效！谢谢。
我想这就是你想要的：stackblitz.com/edit/…