html – 父级具有最小/最大高度时的CSS百分比高度

我知道当您在元素上使用百分比高度时,百分比是其父级的百分比.假设你想要一个孩子是其父母的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,以使整个事物根据视口的大小进行响应.