如何将class为a的div高度设为其内部class为b的div高度+5%？

因为CSS无法直接基于子元素高度计算父元素高度，所以最可靠的实现方式是借助JavaScript，也可以结合CSS变量优化样式逻辑。

JavaScript 直接实现 #

遍历所有class为"a"的元素，逐个获取内部"b"元素的高度，计算后赋值给对应"a"元素：

// 获取所有目标a元素
const aDivs = document.querySelectorAll('.a');

aDivs.forEach(aDiv => {
  // 找到当前a元素下的b元素
  const bDiv = aDiv.querySelector('.b');
  if (!bDiv) return;

  // 获取b元素的实际高度（offsetHeight包含padding和border，若只需内容+padding可改用clientHeight）
  const bHeight = bDiv.offsetHeight;
  // 计算新高度：原高度增加5%
  const targetHeight = bHeight * 1.05;
  // 给a元素设置高度
  aDiv.style.height = `${targetHeight}px`;
});

如果页面内容是动态加载的（比如异步渲染内容），要确保这段代码在所有内容加载完成后执行，可以放在window.onload回调里，或者监听相关元素的加载事件。如果"b"元素高度会随窗口大小变化，还可以给window添加resize事件监听，重新计算高度。

结合CSS变量实现 #

先通过JS把每个"b"元素的高度存入对应"a"元素的CSS变量，再用CSS的calc完成高度计算：

JavaScript 部分 #

const aDivs = document.querySelectorAll('.a');

aDivs.forEach(aDiv => {
  const bDiv = aDiv.querySelector('.b');
  if (bDiv) {
    // 将b元素高度存入自定义CSS变量
    aDiv.style.setProperty('--b-height', `${bDiv.offsetHeight}px`);
  }
});

CSS 部分 #

.a {
  /* 通过CSS变量计算目标高度 */
  height: calc(var(--b-height) * 1.05);
}

这种方式把样式逻辑集中在CSS中，JS只负责传递数据，维护起来更清晰，同样需要注意动态内容的加载时机问题。

注：纯CSS无法直接实现基于子元素高度的百分比计算，因为CSS中百分比高度的基准是父元素高度，而非子元素，因此必须借助JavaScript获取子元素的实际高度值。

内容的提问来源于stack exchange，提问作者Recrudesce Nostalgia