CSS高度百分比，父自动和兄弟在px中不起作用[重复]

Question

这个问题在这里已有答案：

• Percentage Height HTML 5/CSS 6个答案

我想要一个具有自动高度的父级，一个高度为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>

我怎样才能做到这一点？

Answer 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>