calc((50%-10px)/1)高度计算失效，布局异常求助

云上老周

2026-6-13

为什么calc在高度计算中失效，宽度却正常？

核心原因

你把宽度的适配逻辑直接套用到高度上，但两者的布局逻辑存在本质差异，加上计算逻辑错误，导致高度适配失败：

宽度计算为什么正常？
child-1的宽度是calc((50% -10px))，加上margin-right:10px，总占用宽度刚好是父元素的50%，和child-2的50%宽度完美拼接，填满父元素的整个宽度。这里的margin是元素外部的横向间距，计算逻辑刚好匹配并排布局的需求。
高度计算为什么出错？
你想让up和down各占child-2高度的一半，中间留10px间距，但你的计算逻辑错了：

你给up设置height: calc((50% -10px)) + margin-bottom:10px，此时up的总纵向占用高度是50%（(50%-10px)+10px）；
如果down也用同样的calc((50% -10px))，总高度就会变成(50%-10px)+10px+(50%-10px) = 100% -10px，比child-2的高度少10px，自然会导致down上移，无法和左侧child-1的底部对齐。

修正方案

正确的做法是先把中间10px的margin从总高度中扣除，再平分给up和down：

.parent {
  width: 500px;
  height: 300px;
  background-color: #eee;
  padding: 10px;
  margin: 50px auto;
  overflow: hidden;
}
.child-1 {
  width: calc((50% - 10px)/1);
  margin-right: 10px;
  height: 100%;
  background-color: blueviolet;
  float: left;
}
.child-2 {
  width: 50%;
  height: 100%;
  float: right;

  & .up {
    width: 100%;
    /* 总高度减去margin后平分 */
    height: calc((100% - 10px)/2);
    margin-bottom: 10px;
    background-color: red;
  }

  & .down {
    width: 100%;
    /* 和up高度一致 */
    height: calc((100% - 10px)/2);
    background-color: pink;
  }
}

这样up的高度 + margin-bottom + down的高度 = calc((100%-10px)/2) +10px + calc((100%-10px)/2) = 100%，刚好填满child-2的高度，down就能和左侧child-1的底部完美对齐。