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

Question

我知道当你在一个元素上使用百分比高度时,百分比就是它的父元素的百分比.假设您希望孩子成为其父母的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 2将不会出现.当你将其父级(div一)的css从此max-height:50%更改为此时:height:50%div 2将出现,因为它知道父级的高度是什么,因为它是明确定义的.我的问题是有一种方法可以让div二出现在使用(min/max)-height和不使用时height

这是一个小提琴

Answer 1

看看这个,你错过了一小块.假设您要将#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>

高度永远不会实现,因为它受到最大高度的约束,但没有声明高度,它是高度:auto,这是未声明的.我将#container的高度设置为74vh,以根据视口的大小使整个事物响应.