Firefox 中的 FxFlexFill 无法正常工作

Question

我遇到了无法解决的 FxFlex 和 Firefox 问题。

我想要做的是 div 填充屏幕，header 高度为 40px，内容为其余高度。

它适用于 chrome，我的屏幕有 982px，header 有 40px，内容有 942px。

在 Firefox 中，屏幕有 982px，header40px，内容有 982px，因此，它没有显示所有内容。

这是我的 html:

<div fxFlexFill fxLayout="column">

   <header fxFlex="40px">
   </header>

   <content fxFlex fxLayout="row">
   </content>

</div>

有人知道怎么解决吗？

Answer 1

我解决了，解决方案是在第二个fxFlex中包含高度：

<div fxFlexFill fxLayout="column">

  <header fxFlex="40px">
  </header>

  <content fxFlex="calc(100%-40px)" fxLayout="row">
  </content>

</div>

希望对您有所帮助！

Answer 2

根据 Angular Wiki，fxFlexFill 的定义为：

fxFlexFill: Maximizes width and height of element in a layout container

没有提到的是，如果父容器或布局容器中的元素没有任何高度，它会得到高度：0px。所以你总是需要一些 parent/child 节点有一个不是百分比的高度。

FxFlexFill in firefox not working properly