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

Posted 2023-03-06

【中文标题】父级具有最小/最大高度时的 CSS 百分比高度

【英文标题】：CSS percent height when parent has min/max height

【发布时间】：2013-10-12 00:24:48

【问题描述】：

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

这是fiddle

【问题讨论】：

不改，加； jsfiddle.net/V78Kx

@DanHeberden 谢谢，但我不希望 div 一总是 50%。我希望它能够在 100px 和 50% 之间变化。

它将如何变化？如果#container 调整大小，设置height:50% 和min-height:100px 将保持最小值；我想我不明白父级上固定的 500px 高度会如何影响可变性：/

就是这样，容器不会是固定的500px。我只是为了小提琴而简化。

如果你想让 CSS 在 100px 和 50% 之间根据父高度进行选择，那是不可能的。如果您在#container 上调整我的小提琴高度，#two 将保持在 50%，但请遵守最小/最大设置。这就是它应该如何工作的方式。如果您想要其他行为，也许需要一个弹性框或通过 JS 进行控制。

【参考方案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>

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

【讨论】：

这个巧妙的把戏。我刚刚将height: 100vh; 添加到带有max-height 的元素中，然后繁荣：height 对其子元素起作用。

【参考方案2】：

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

Longer Explain

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

jsFiddle

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

【讨论】：

你的小提琴里有 javascript... 你也可以按百分比指定父母的身高。