如何在不使用JavaScript及视窗单位的情况下实现div高度为宽度的一半减50px

嘿，这个需求我之前做响应式布局的时候刚好碰到过！确实aspect-ratio在这里派不上用场，因为它只能定义宽高的固定比例关系，而你的需求是高度 = 宽度/2 -50px，是带常数项的线性计算，不是单纯的比例，所以直接在aspect-ratio里套calc()肯定不行。不过咱们有两个靠谱的CSS方案可以解决：

方法一：CSS变量直接计算（最简洁） #

这个方法的核心是先把宽度用CSS变量定义好，然后直接基于这个变量计算高度，完全不需要依赖特殊属性：

.your-div {
  --custom-width: calc((100% / 5) - 8px); /* 先把宽度存进变量 */
  width: var(--custom-width);
  height: calc(var(--custom-width) / 2 - 50px);
  background: #e0e0e0; /* 方便可视化效果 */
}

原理很简单：CSS变量会先计算出具体的宽度值，然后height就可以直接基于这个已计算好的变量做减法和除法，完全符合你的需求。这个方案的优势是代码干净，不需要额外的HTML结构，只要你能预先确定宽度的计算逻辑就行。

方法二：伪元素+Padding Trick变种（适合内容容器场景） #

如果你的div里面需要放内容，而且不想让高度计算影响内容布局，可以用伪元素来“撑开”高度，再用负margin减去50px：

HTML结构 #

<div class="target-div">
  <div class="content">
    <!-- 这里放你的内容 -->
  </div>
</div>

CSS代码 #

.target-div {
  width: calc((100% / 5) - 8px);
  position: relative;
  background: #e0e0e0;
  overflow: hidden; /* 防止内容溢出 */
}

.target-div::before {
  content: "";
  display: block;
  padding-top: 50%; /* 利用padding百分比基于父元素宽度的特性，先得到宽度一半的高度 */
  margin-bottom: -50px; /* 减去需要的50px */
}

.target-div .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px; /* 可选，给内容加内边距 */
}

这个方法的核心是利用padding-top: 50%让伪元素的高度等于父元素宽度的一半，再通过margin-bottom: -50px把高度多出来的50px抵消掉，最后用绝对定位让内容填充整个容器。

两种方法都完全不需要JavaScript和视窗单位，你可以根据自己的HTML结构和需求选一个合适的就行~

内容来源于stack exchange