reactjs - 使 React AppBar 和 SplitPane 适合而不需要滚动条

Question

我正在制作一个 React 页面，顶部有一个 AppBar，下面有一个 SplitPane，以便用户可以编辑和预览内容并调整大小。问题是 SplitPane 似乎正在调整自身大小，就好像 AppBar 不存在一样，这使 UI 变得非常困惑:SplitPane 中的两个 Pane 都是可滚动的，然后 Root View 也是可滚动的。我只希望 Pane 可以滚动。

我已经尝试过使用react-split-pane和react-splitter-layout，并且都遇到了这个问题。 (实际上我更喜欢react-splitter-layout，因为它看起来开箱即用，但我发现react-split-pane的使用更广泛。我怀疑对一个的修复也适用于另一个。)

我尝试使用CSS将SplitPane及其父级的高度设置为calc(100% - ${appBarHeight}px)(基于Material UI如何处理抽屉)，但它没有起作用。我尝试过使用各种 CSS(设置高度、弯曲、显示)将其包装在 div 中以及 Material UI 的 Box 中，但到目前为止没有任何效果。

我能够通过将 AppBar 放入其中一个 Pane 来破解解决方案，但这显然是一个糟糕的选择，因为该 Pane 只是许多屏幕之一，我不想在任何地方复制它。

这是一个简单的例子，展示了我遇到的问题:

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import SplitPane from 'react-split-pane';

function App() {
  return (
    <div className="App">
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="h6" color="inherit">
            Photos
          </Typography>
        </Toolbar>
      </AppBar>
      <SplitPane>
         <div>A</div>
         <div>B</div>
      </SplitPane>
    </div>
  );
}

export default App;

所以我从上面的期望是最终得到一个标题为“照片”的页面，一个带有“A”的垂直 Pane ，一个带有“B”的垂直 Pane ，并且没有滚动条，因为内容非常短。相反，整个页面都会显示一个滚动条，您可以向下滚动 AppBar 的高度。我该如何解决这个问题？

Answer 1

您需要将 SplitPane 放在 AppBar 内具有“相对”位置的元素内。 maxSize section of the documentation 中对此进行了描述。 react 分割 Pane 。

function App() {
  return (
    <div className="App">
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="h6" color="inherit">
            Photos
          </Typography>
        </Toolbar>
        <main style={{ position: "relative" }}>
         <SplitPane>
           <div style={{ padding: "0 2rem" }}>
             A
           </div>
           <div style={{ padding: "0 2rem" }}>
             B
           </div>
         </SplitPane>
        </main>
      </AppBar>
    </div>
  );
}