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二不会出现。当你将其父级（div 1）的css从此max-height:50%更改为此时：height:50% div将出现，因为它知道父级的高度是什么，因为它是明确定义的。我的问题是有一种方法可以在使用(min/max)-height而不是height

时显示div 2

这是fiddle

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，以便根据视口的大小对整个事物做出响应。

Answer 2

如果你没有指定高度，或者你按照百分比指定高度但没有给它的parenet指定高度，则块元素将调整为内容高度（在这种情况下为#two为0px）。

Longer Explain

所以只需将高度设置为最小高度，因为DOM高度将从最小高度开始而不指定高度。

jsFiddle

#one{
    background: red;
    min-height: 100px;
    height: 100px;
    max-height: 50%;
    padding: 10px;
}

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

2 个答案: