Html 最大高度嵌套不工作_Html_Css

Html 最大高度嵌套不工作

html css

Html 最大高度嵌套不工作,html,css,Html,Css,我将最大高度应用于嵌套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>

我将最大高度应用于嵌套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>


//高度不适用

不幸的是，百分比高度是根据父元素明确指定的

高度来计算的，而不是其实际高度。如果未设置高度
，则它是自动
，不能用于百分比。只有Opera 12-（Presto）直接从指定的min height
计算percantagemin height

假设你不在乎旧浏览器（因为你使用了像calc（）
）这样的现代功能），我建议你试试Flexbox的这种布局。
你在测试哪种浏览器？它的chrome最新版本