使用 display: flex 时，react split pane 显示在其他组件之上

Question

对于我的新 React 项目，我需要一个拆分窗格。
为此，我正在使用 https://github.com/tomkp/react-split-pane。
在我实现所有内容之后，我想要上面的 header，所以它看起来像这样。

所以我将 header 添加到我的根组件。

render() {
        return (
            <div className='App'>
                <h1>This is my heading</h1>
                <SplitPane split='vertical' minSize={50} defaultSize={100}>
                    <div>split 1</div>
                    <div>split 2</div>
                </SplitPane>
            </div>
        );
    }
}

就像这样，没有任何 css 它给了我几乎正确的结果。这里唯一的问题是拆分窗格似乎以 100vh 作为其高度，因此整个应用程序更大。这给了我漂亮的滚动条，我不想要它。

我的下一个想法是将所有内容放入 css 网格（我知道这可能不是最佳用例，但至少我会知道如何解决大小问题）然后调整大小它使用相对单位。

我添加到我的主要组件中的css是

.App {
    display: grid;
    grid-template-rows: auto 1fr;
}

此更改并未达到我想要的效果。它没有整齐地堆叠所有东西，而是以某种方式将拆分窗格放在 header.

上方

我认为我在 css 网格上做错了，所以我应用了 display: flex;，结果出现了同样的问题。

我真的不知道这里的问题是什么，所以我很好奇以前是否有人遇到过这样的问题。

Answer 1

SplitPane source code

将此添加到您的 .App 选择器：

.App {
    position: relative;
}

此外，如果您希望两个窗格的宽度正好是一半，请将您的 SplitPane 组件更改为：

<SplitPane split="vertical" minSize="50%" defaultSize="50%">

不幸的是，存在一个问题，即窗格停止调整大小并且应用程序在非常小的宽度下超出范围。

In response to:

SplitPane shrinking down to a size where it's not really usable even though the height is set to 100%.

SplitPane 中的内容不是 visible/usable 因为：

SplitPane 有属性 height: 100%。这意味着 SplitPane 的高度是其父级高度的 100%。
SplitPane 有属性 overflow: hidden。这将隐藏任何超出 SplitPane 尺寸的内容。

由于 SplitPane's height = .App's height = h1's height 和 h1 的高度约为 30-40px，SplitPane 的高度也约为 30-40px。这意味着高度大于 30-40px 的任何 SplitPane 子项的内容都会被截断。
SplitPane 最有可能通过计算其前面兄弟姐妹的总高度来计算自己从顶部偏移多少。

所以，现在我们知道 SplitPane 的 CSS 属性如下所示：

{
    position: absolute;
    top: 0 || /* auto-calculated by SplitPane */;
    left: 0 || /* auto-calculated by SplitPane */;
    overflow: hidden;
    height: 100%; /* total height of preceding siblings */
    ...
}

您的下一步是决定您希望应用程序的外观和功能如何，并根据您的决定做出选择。开始：

是否要将导航栏固定到视口顶部？
如果您不想要滚动条，您希望如何处理窗格内的多余内容？
你的网站是mobile-friendly吗？如果是这样，您希望如何在小屏幕上显示拆分窗格？

In response to:

How do I change to position: relative while assigning all space below the header to the split view?

一些可能的解决方案是使用 Javascript 或 Sass/SCSS/Less 将 SplitPane 的总高度设置为视口的高度减去 SplitPane 从顶部偏移的高度。

很难给出明确的答案，因为我不知道你想如何处理没有滚动条的超过 100vh 的观看内容。

In response to:

[I] can't use display: grid or flex since it would still overwrite the header.

Flexbox/Grid 不起作用，因为 SplitPane 与其兄弟姐妹不在同一个 space 中。您必须将 SplitPane 的 position 属性覆盖为 static.

CodePen

.App {
  display: flex; /* Introduce Flexbox */

  /* This is added to change the orientation of elements from 
     left-right (row) to top-bottom (column). */
  flex-direction: column;
}

<SplitPane ... style={{ position: "static" }}>

Next steps

现阶段我唯一可以推荐的是将height: 100vh和width: 100vw添加到.App。

使用 display: flex 时，react split pane 显示在其他组件之上

react split pane shows above other components when using `display: flex`

css

reactjs

flexbox

css-grid

splitpane