在布局html时可能无限循环？

Question

当子元素的高度指定为父元素的百分比时，在放置html元素时需要多少布局传递，而父元素的百分比不指定显式高度？例如，在

的情况下

<div>
  <div style:"height=50%">...</div>      
  ...
</div>

内部div的高度（＆＃34;父亲＆＃39; s高度＆＃34;的50％）不能立即计算，因为父母的高度直到其所有孩子的身高才知道。总结的高度。但这又需要布置孩子，包括计算内部div的高度......看起来像无限循环场景？

Answer 1

最多2个递归周期：

1. 一个自下而上的循环，你要求元素“假设你不受高度限制，这将是你的最低高度？” （在你的宽度限制范围内）。
   • leafs将报告其最低要求
   • 父母会最小化他们的孩子，根据每个孩子的分配百分比和报告的最小身高来计算自己的最小身高。
2. 自上而下的循环，根据报告的最小高度，您计算并设置符合比例的实际高度。

这样，最小高度元素（叶子）将确定每个节点末端的实际高度。

评论中的问题：

  

父母根据每个孩子指定的百分比以及每个孩子报告的最小身高来计算自己的最小身高的确切方式是什么？

哦，来吧！如果一个孩子的处方百分比为p且报告的最小身高为m，那么满足该孩子所需的最小总身高是多少？我们把它放在小学：如果p%代表m，那么100%是多少？

假设孩子{c ₁ ，...，c _M }具有{p ₁ ，...，p所需的百分比 _M }（所有百分比> 0，否则只是忽略子项，根据定义它们的高度为0）并报告{m ₁ ，...， m _M }为最小高度。

父母的最小身高是Hp = max（m ₁ / p ₁ ，...，m _N / p < sub> N ）并将子项缩放为{p ₁ * H _p ，...，p _M ** H _p }分别在实际高度的“协商”之后