我知道当您在元素上使用百分比高度时,百分比是其父级的百分比.假设你想要一个孩子是其父母的40％.父项具有分配最大和最小高度,但没有指定明确的高度.例如：
<div id="container">
<div id="one">
<div id="two"></div>
</div>
</div>
CSS
#container{
height: 500px;
background: yellow;
}
#one{
background: red;
min-height:100px;
max-height: 50%;
padding: 10px;
}
#two{
background: blue;
height: 40%;
}
Div二不会出现.当您将父级(div 1)的css从此最大高度更改为50％时：height：50％div将出现两次,因为它知道父级的高度是因为它被明确定义.我的问题是在使用(最小/最大) – 高而不是高度时使div两个出现的方法
这是一个fiddle
解决方法
检查一下,你错过了一小块.假设你想设置#one的高度与#container相比,#two与#one相比(这是我认为你要做的).我们需要一个#one的高度语句来获取#two的高度.这里的技巧是为元素设置一个最大高度,一个最小高度和一个高度,从而给出一个由最小值和最大值约束的高度.
尝试这个css：
<style>
#container{
height: 74vh;
background: yellow;
}
#one{
background: red;
min-height:100px;
max-height: 50%;
height: 100%;
padding: 10px;
}
#two{
background: blue;
height: 40%;
}
</style>
高度永远不会实现,因为它受到最大高度限制,但没有声明高度是height：auto,它是未声明的.我将#container的高度设置为74vh,以使整个事物根据视口的大小进行响应.
