时间戳

首页 > 解决方案 > 如何以纯 CSS 方式使 100% 宽度的 div 始终具有 50% 的相对高度？

css - 如何以纯 CSS 方式使 100% 宽度的 div 始终具有 50% 的相对高度？

问题描述

我有一个 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>

标签： css

解决方案

由于分配给边距和填充的任何百分比都是基于 计算的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>

推荐阅读