<分区>
标签 css height percentage
<分区>
我想要一个具有自动高度的父元素，一个高度以像素为单位的兄弟元素和一个以百分比为单位的元素。我唯一的想法是行不通的，我也没有任何其他想法可以做到这一点。我试过了(但元素高度为 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>我该怎么做？
最佳答案
如果我没听错，你是这个意思吗？
.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>关于以百分比表示的 CSS 高度，以 px 表示的父级自动和兄弟级不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54951313/