Question

<div fxFill fxLayout="column">
    <div fxFlex="8" fxLayout="column"> Fixed Header </div>
    <div fxFlex="20" fxLayout="row" [fxHide]="isShow"> Colapsable Header </div>
    <div fxFlex="72" fxLayout="column"> Page content </div>
</div>

这样，如果我隐藏header，页面的20%仍然是空白的，导致包含pagecontent的div仍然只占72%

但是如果我使用 with calc <div fxFlex="calc(92% - 20%)">，这个相应的 div 会根据上面的 div 是隐藏还是显示来修改她的高度，所以即使 div 折叠起来也永远不会有空格..

为什么会这样？ calc(92% - 20%) 它总是 72%，那么为什么它的行为不同？

编辑问题标题后的更多上下文：

在观察生成的 Html 后，我收集到了

fxFlex="72" 设置一个 max-height="72%"
fxFlex="calc(92%-20%)" 集 min-height="72%"

Answer 1

简短的回答是因为您使用的是 calc。

长的答案是 fxLayout 库正在检查您使用的是具体值（例如只是一个数字）还是一个 calc 函数，并基于此决定 min 或 {应应用 {1}} 高度

max

您可以在 here 上找到的源代码片段

如代码段所示，// Fix for issues 277, 534, and 728 if (basis !== '0%' && basis !== '0px' && basis !== '0.000000001px' && basis !== 'auto') { css[min] = isFixed || (isValue && grow) ? basis : null; css[max] = isFixed || (!usingCalc && shrink) ? basis : null; } 不会应用于输入具有 max-height 值的情况。

既然我们已经清除了 calc 案例，让我们深入了解 calc 案例。

fxFlex="72" 指令/输入最多接受 3 个空格分隔的参数，fxFlex 如果只提供一个输入，如您的情况 fxFlex="{grow} {shrink}" {base} ，这将被评估相同方式fxFlex="72"

所以现在当我们进入 fxFlex="1 1 72" 语句时，我们将首先检查 if 的结果，在前半部分我们看到 css[min] 属性（这将是假的，我们可以跳过这个一个，因为它与案件无关）。在第二个中，我们混合了 isFixed，因此 (isValue && grow) 属性将是真实的，因为它将采用默认值 1。这里更有趣的是 grow 属性，它代表以下逻辑（再次在源代码中看到）

isValue

我们已经讨论过 let isValue = (hasCalc || hasUnits); 在这种情况下将是 hasCalc（因为我们有以下输入 false ），关于 fxFlex="72" 这是一个属性，用于检查是否在 hasUnits 值之后的 % 旁边有任何单位（单位如 %,px,rem...），因此在这种情况下，basis 也将是 hasUnits。

总而言之，我们将有 false 值等于 css[min]。

在下一行我们再次看到 null 值等于 isFixed 并且在表达式的后半部分我们看到以下 false ，这次没有 calc 函数所以(!usingCalc && shrink) 将是 !usingCalc，并且因为我们有 true 的默认值 1，整个表达式将被评估为 shrink 并且它将应用true 值为 basis。

如果您不想使用 css[max]，我建议您执行以下操作

calc

这里不是 <div fxFill fxFlex="100" fxLayout="column"> <div style="background-color: palegreen;" fxFlex="8" fxLayout="column"> Fixed Header <button (click)="toggle()">Toggle</button> </div> <div style="background-color: rgb(179, 24, 174);" fxFlex="20" fxLayout="row" [fxHide]="show"> Colapsable Header </div> <div style="background-color: orange;" fxFlex="1 0 72" fxLayout="column"> Page content </div> </div> 的默认 fxFlex="72" 值为 shrink，我通过这样做将值设置为 1 0将跳过我们现在正在查看的最小-最大检查并填充可用空间。

FxFlex Calc 设置最小高度，而原始值设置最大高度

1 个答案: