制作沒有滾動條的分配面板

Question

我想通過https://github.com/johnwalley/allotment制作一個可拖動的拆分面板。

https://stackblitz.com/edit/react-ts-qrb8jw?file=App.tsx,style.css,index.tsx

我注意到因為 CSS 樣式： .container { height: 100vh; overflow: scroll; } .container { height: 100vh; overflow: scroll; } .container { height: 100vh; overflow: scroll; } , output右邊有一個滾動條。

但是如果我們刪除className="container" ，分配將不會呈現。

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

有誰知道如何呈現占據屏幕高度 100% 且不會導致右側滾動條的分配？

Answer 1

也許嘗試重置默認邊距以防止不必要的間距，並在 CSS 中指定overflow屬性默認不顯示 scorllbars。

修改后的分叉示例： stackblitz

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

.container {
  height: 100vh;
  /* 👇 Can also be "overflow: auto" if prefer to show scrollbars when content overflows */
  overflow: hidden;
}