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

Question

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

<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 来实现这种布局。