如何用CSS Grid实现底部栏拖拽覆盖主栏（主栏最小200px）

需求说明 #

• 主栏（mainbar）最小高度限制为200px，拖拽底部栏时，主栏缩至该高度后不再缩小
• 底部栏（bottombar）自身最小高度200px，当主栏达到最小高度后，拖拽底部栏会让其覆盖在主栏上方
• 采用纯CSS Grid方案，避免hack实现带来的调试面板闪烁问题，后续需支持扩展头部、侧边栏等布局元素

解决方案 #

核心思路：

1. 利用CSS Grid行模板结合最小高度限制，为主栏和底部栏设置尺寸阈值
2. 容器设置overflow: hidden，当底部栏行高超过剩余空间时，自动向上覆盖主栏内容
3. 通过JS精准控制拖拽时的行高计算，同时限制两者的最小高度，避免异常缩放

修改后完整代码 #

HTML

<div class="container">
  <div class="pane mainbar">
    <p>Main Content Area</p>
    <p>Main Content Area</p>
    <p>Main Content Area</p>
    <p>Main Content Area</p>
    <p>Main Content Area</p>
    <p>Main Content Area</p>
  </div>
  <div class="pane bottombar">
    <p>Bottom Bar (Resizable)</p>
    <span class="gutter"></span>
  </div>
</div>

CSS

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

body,
html {
  height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.container {
  display: grid;
  grid-template-rows: minmax(200px, 1fr) minmax(200px, auto);
  height: 100vh;
  overflow: hidden; /* 隐藏超出容器的内容，实现底部栏覆盖效果 */
}

.mainbar {
  background-color: #f0f0f0;
  padding: 20px;
  min-height: 200px; /* 主栏最小高度 */
}

.bottombar {
  background-color: #ccc;
  position: relative;
  padding: 20px;
  min-height: 200px; /* 底部栏最小高度 */
}

.gutter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: row-resize;
  background-color: #888;
  z-index: 1;
}

JavaScript

let isResizing = false;
const container = document.querySelector(".container");
const gutter = document.querySelector(".gutter");

const resizeBottomBar = (event) => {
  if (!isResizing) return;

  const containerHeight = container.clientHeight;
  const pointerY = event.clientY;
  const minMainHeight = 200;
  const minBottomHeight = 200;

  // 计算主栏高度：不小于200px，同时保证底部栏至少有200px高度
  const mainbarHeight = Math.max(minMainHeight, Math.min(pointerY, containerHeight - minBottomHeight));
  // 底部栏高度：根据拖拽位置计算，超过容器部分会被overflow:hidden截断，实现覆盖效果
  const bottombarHeight = containerHeight - pointerY;

  container.style.gridTemplateRows = `${mainbarHeight}px ${bottombarHeight}px`;
};

gutter.addEventListener("pointerdown", () => {
  isResizing = true;
  document.addEventListener("pointermove", resizeBottomBar);
  document.addEventListener("pointerup", () => {
    isResizing = false;
    document.removeEventListener("pointermove", resizeBottomBar);
  });
});

关键说明 #

• Grid容器的overflow: hidden是实现覆盖效果的核心，当底部栏行高超过容器剩余空间时，超出部分会覆盖主栏并被隐藏
• JS计算中通过Math.max和Math.min同时限制主栏和底部栏的最小高度，避免两者被缩至不符合需求的尺寸
• 该方案完全基于CSS Grid布局，后续扩展头部、侧边栏时，只需修改grid-template-rows或添加grid-template-columns即可，不会破坏现有拖拽逻辑

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