如何实现无滚动条且占满屏幕高度的Allotment可拖拽拆分面板

问题根源 #

你遇到的滚动条是两个原因叠加导致的：

1. 浏览器默认给<body>加了margin，导致设置height:100vh的容器会超出视口高度
2. 容器的overflow:scroll会强制显示滚动条，即使内容没有超出容器范围

解决方案 #

1. 重置全局样式

先去掉<body>的默认内外边距，避免额外空间挤占：

body {
  margin: 0;
  padding: 0;
}

2. 调整容器CSS

把容器的overflow:scroll改成overflow:hidden，同时保留height:100vh确保父容器有明确高度（Allotment需要父级有高度才能正常渲染）：

.container {
  height: 100vh;
  overflow: hidden;
}

3. 修改后的组件代码

你的组件结构不需要改动，保留容器即可：

export default function App() {
  return (
    <div className="container">
      <Allotment vertical>
        <Allotment.Pane>Main Area</Allotment.Pane>
        <Allotment.Pane>abc</Allotment.Pane>
      </Allotment>
    </div>
  );
}

替代方案（用百分比高度） #

如果不想用vh单位，也可以通过给html、body设置100%高度来实现：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  overflow: hidden;
}

这样调整后，容器会刚好占满整个屏幕高度，不会出现多余的右侧滚动条，同时Allotment也能正常渲染拆分面板。

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