以百分比表示的 CSS 高度，以 px 表示的父级自动和兄弟级不起作用 [重复]答案

【问题标题】：CSS height in percentage, parent auto and sibling in px doesn't work [duplicate]以百分比表示的 CSS 高度，以 px 表示的父级自动和兄弟级不起作用 [重复]
【发布时间】：2019-07-23 21:08:24
【问题描述】：

我想要一个具有自动高度的父级，一个以 px 为高度的兄弟，一个以百分比为单位的元素。我唯一的想法行不通，我没有任何其他想法可以做到这一点。我试过这个（但元素高度为 0；我希望它是兄弟/父高度的 90%）：

#parent {
  height:auto;
  width:100%;
  background:blue;
}
#element {
  height:90%;
  width:50%;
  background:black;
}
#sibling {
  height:400px;
  width:50%;
  background:red;
}

<div id="parent">
  <div id="element"></div>
  <div id="sibling"></div>
</div>

我该怎么做？

【问题讨论】：

什么不起作用？您期望的行为是什么？
@Helenesh 抱歉，我添加了它。 element-div 的高度不起作用
元素 div 的高度不起作用，因为没有指定父 div 的高度。实现您的目标的一种方法是重新排列您的 html。 codepen.io/andrewgarrison/full/bZpbyQ

标签： css height percentage

【解决方案1】：

如果我没听错，你是这个意思吗？

.parent {
  width:100%;
  height:400px;
  background:orange;
}
.parent .first-element {
  height:90%;
  width:50%;
  background:black;
  display:block;
  position:relative;
  float: left;
  color: #FFF;
}
.parent .second-element {
  height:200px;
  width:50%;
  background:red;
  display:block;
  position:relative;
  float: right;
  color: #FFF;
}

<div class="parent">

  <div class="first-element">
      Black Element
  </div>

  <div class="second-element">
      Red Element
  </div>

</div>

【讨论】：