实现全屏双列布局：一列占父容器剩余高度，一列可超出推挤内容

这个需求确实有点绕——既要让右侧列刚好填满顶部容器剩余的视口高度，又要让左侧列能自由扩展高度，同时把下方的额外内容给挤下去。你之前的flex方案之所以失效，是因为.columns容器被flex:1限制在了剩余视口高度里，左侧列的高度超出只是内部溢出，不会撑开父容器，自然推不动下面的additional内容。

下面是可行的解决方案：

核心思路 #

让左侧列留在文档流中，负责撑开父容器以推挤下方内容；右侧列脱离文档流，用绝对定位固定其高度为「视口高度 - 顶部容器高度」，这样两者的高度就互不干扰了。

完整代码实现 #

HTML #

<div class="container">
  <div class="top">
    Top Content<br>
    (高度未知，可自由扩展)
  </div>
  <div class="columns">
    <div class="left">
      Left Column<br>
      高度超过剩余视口<br>
      可以继续添加内容...<br>
      内容越多，下方额外内容被推得越远
    </div>
    <div class="right">
      Right Column<br>
      刚好占满顶部剩余的视口高度
    </div>
  </div>
</div>
<div class="additional">
  Additional Content - 被左侧列推挤到下方
</div>

CSS #

* {
  margin: 0;
  box-sizing: border-box;
}

.top {
  background: orchid;
  padding: 2rem;
  /* 模拟未知高度，实际由内容决定 */
}

.columns {
  position: relative;
  width: 100%;
  /* 父容器高度由左侧列撑开 */
}

.left {
  width: 50%;
  background: lightgreen;
  /* 模拟超出剩余视口的高度，实际由内容决定 */
  min-height: calc(100vh - 120px);
  padding: 2rem;
  /* 留在文档流中，撑开.columns容器 */
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  /* 使用CSS变量动态计算高度 */
  height: calc(100vh - var(--top-height));
  background: cornflowerblue;
  padding: 2rem;
}

.additional {
  background: #f0f0f0;
  padding: 2rem;
  margin-top: 1rem;
}

JavaScript #

因为顶部容器的高度是动态的，纯CSS无法直接获取这个值，所以需要JS辅助计算并赋值给CSS变量：

// 计算顶部容器高度并设置CSS变量
function setTopHeight() {
  const topEl = document.querySelector('.top');
  document.documentElement.style.setProperty('--top-height', `${topEl.offsetHeight}px`);
}

// 页面加载时计算
window.addEventListener('load', setTopHeight);
// 窗口 resize 时重新计算，适配响应式
window.addEventListener('resize', setTopHeight);

效果说明 #

• 右侧列：通过绝对定位和动态计算的高度，刚好填满顶部容器剩余的视口高度，不会随左侧列的高度变化而变化。
• 左侧列：留在文档流中，高度可以自由扩展（无论是内容自然增长还是手动设置高度），会撑开.columns容器，从而把下方的additional内容推到自身下方。
• 额外内容：始终位于.columns容器的下方，不会被视口截断。

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