20

我知道当你在元素上使用百分比高度时，百分比就是它的父元素的百分比。假设您希望孩子成为其父母的 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 1）的 css 从 thismax-height:50%更改为 this 时：height:50%div 2 会出现，因为它知道他的父级的高度是多少，因为它是明确定义的。我的问题是有没有办法让 div 两个在使用时出现而(min/max)-height不是height

这是一个小提琴

4

2 回答 2

9

看看这个，你少了一小块。假设你想设置#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>

高度永远不会达到，因为它受到最大高度的约束，但没有声明高度，它是高度：自动，这是未声明的。我将#container 的高度设置为 74vh，以使整个事物根据视口的大小做出响应。

于 2016-03-22T22:29:38.273 回答
0

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

更长的解释

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

jsFiddle

#one{
    background: red;
    min-height: 100px;
    height: 100px;
    max-height: 50%;
    padding: 10px;
}
于 2013-10-04T22:21:24.163 回答