能否将元素的auto高度转为变量用于calc函数计算？

纯CSS没办法直接获取auto高度元素的实际渲染高度并转为CSS变量，不过可以通过以下两种方式实现你的需求：

方案一：JavaScript动态设置CSS变量 #

通过JS获取左侧列的实际高度，然后将其设置为全局CSS变量，这样右侧列就能在calc中使用：

步骤1：HTML结构示例 #

<div class="container">
  <div class="column left">
    <!-- 你的文本内容 -->
  </div>
  <div class="column right">
    <!-- 你的图片内容 -->
  </div>
</div>

步骤2：JavaScript代码 #

// 获取目标元素和根节点
const leftColumn = document.querySelector('.column.left');
const rootElement = document.documentElement;

// 定义设置高度变量的函数
function updateLeftColHeight() {
  const currentHeight = leftColumn.offsetHeight;
  rootElement.style.setProperty('--col-left-height', `${currentHeight}px`);
}

// 页面加载完成后初始化
window.addEventListener('load', updateLeftColHeight);
// 窗口大小变化时重新计算（适配响应式场景）
window.addEventListener('resize', updateLeftColHeight);

步骤3：CSS使用变量 #

.column.left {
  height: auto;
}

.column.right {
  height: calc(var(--col-left-height) + 80px);
  /* 可根据需求添加其他样式，比如图片适配 */
}

方案二：纯CSS布局技巧（无需JS） #

如果不想依赖JS，可以通过布局特性实现右侧列高度比左侧多80px的效果，不需要明确获取左侧高度：

示例1：Grid布局+伪元素扩展 #

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列宽度可自定义 */
  align-items: start;
}

.column.right {
  position: relative;
  /* 确保内容不会被伪元素遮挡 */
  z-index: 1;
}

/* 用伪元素向下扩展80px高度 */
.column.right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -80px;
  background: #fff; /* 或对应图片背景色/图片 */
  z-index: -1;
}

示例2：Flex布局+负margin #

.container {
  display: flex;
}

.column.left {
  flex: 1;
}

.column.right {
  flex: 1;
  margin-bottom: -80px; /* 让容器高度超出左侧80px */
  padding-bottom: 80px; /* 给图片预留空间 */
  overflow: hidden;
}

.column.right img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片适配容器 */
}

这两种CSS方案的核心是利用布局特性让右侧列的视觉高度自动跟随左侧列并额外扩展，无需手动获取高度值。

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