html - 嵌套的最大高度不起作用

Question

我正在将最大高度应用于嵌套 div？但它没有像预期的那样工作 根元素工作是完美的，但孩子身高不适用？

<div style="max-height: calc( 33% - 10px);">
  <div style="height:30px;"></div>
  <div style="max-height: calc( 100% - 30px);">
    //height not applying
  </div>
</div> 

Answer 1

不幸的是，百分比高度是根据父元素的明确指定 height的，而不是其实际高度计算的。如果height未设置，则为auto，不能用于百分比。只有 Opera 12- (Presto)min-height从指定的计算百分比min-height计算百分比。

假设您不关心旧浏览器（因为您使用诸如 等现代功能calc()），我建议您尝试使用 Flexbox 进行这种布局。