如何以纯 CSS 方式使宽度为 100% 的 div 始终与其宽度具有 50% 的相对高度?

Question

>我有一个div，我已将其宽度设置为100%

因此，div 可以调整其父元素的大小或窗口的大小。

但是，我希望div 的高度为 50%，我应该写什么 CSS？(或任何其他百分比，而不仅仅是 50%(

看来50%绝对是错误的方式。

我可以使用JavaScript来做到这一点，但是有没有纯粹的CSS方式？

#out {
border:1px solid #f00;
position:relative;
width:100%;
height:50%;
}

<div id="out">
stuff<br>
stuff<br>
</div>

Answer 1

由于分配给边距和填充的任何百分比都是根据width计算的，因此您可以使用它来保持纵横比：

#out {
border: 1px solid #f00;
padding: 25% 0;
position: relative;
width: 100%;
}

<div id="out">
stuff<br> stuff
<br>
</div>

但是，这样做的问题是您的内容会进一步增加高度。要解决此问题，请将内容包装在另一个容器中，您给出position: absolute：

#out {
border: 1px solid #f00;
padding: 25% 0;
position: relative;
width: 100%;
}
.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

<div id="out">
<div class="inner">
stuff<br> stuff
<br>
</div>
</div>