通过重叠调整网格大小

Question

我有这样的代码，

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

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

  const containerHeight = container.clientHeight;
  const pointerY = event.clientY;
  const mainbarHeight = Math.max(50, pointerY);
  const bottombarHeight = Math.max(50, 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);
  });
});

* {
  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: 1fr 0.2fr;
  /* Initial sizes of mainbar and bottombar */
  height: 100vh;
}

.mainbar {
  background-color: #f0f0f0;
  padding: 20px;
}

.bottombar {
  background-color: #ccc;
  position: relative;
  padding: 20px;
}

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

<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>

我需要做的是将底部栏滑动到主栏上，目前其调整主栏的大小太小，是否可以将主栏的大小调整为最多200px，但是在主栏达到200px之后，底部栏应该重叠/覆盖并越过主栏（最小高度200px），我知道这可以通过绝对位置实现，是否可以仅使用 css 的 GRID ，谢谢。

这是供您玩耍的小提琴 - https://jsfiddle.net/e3Lonhdc/

P.s这只是示例，我将有 header ， leftbar ， navbar ， rightbar ， Bottombar 等。我只是想知道网格是否可以流过另一个网格

我知道我可以通过 grid-area: 1 / 1; 完全溢出到另一个网格之上； ，但是当我拖动时，它有时会到达第一个网格的一半。

编辑：我期待与此完全相同的功能 - https://jsfiddle.net/9kb5cn0v/，它是通过大量 hack 制作的，并且在打开检查元素时太闪烁。

Answer 1

您可以尝试使用单个细胞。

平均测试：

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

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

  const containerHeight = container.clientHeight;
  const pointerY = event.clientY;
  const mainbarHeight = Math.max(50, pointerY);
  const bottombarHeight = Math.max(50, containerHeight - pointerY);
  bottombar.style.height='calc(100vh - '+pointerY+'px)';
   
};

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

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

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

.container {
  display: grid;

  /* Initial sizes of mainbar and bottombar */
  height: 100vh;
}
.mainbar,
.bottombar {
grid-row:1;
grid-column:1
}
.mainbar {
  background-color: #f0f0f0;
  padding: 20px;
}

.bottombar {
  background-color: #ccc;
  position: relative;
  padding: 20px;
  margin-top:auto;
}

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

<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>