Question

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

因此我将标头添加到了我的根组件中。

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

此更改并没有给我我想要的效果。与其整齐地堆叠所有内容，不如以某种方式将拆分窗格放在标题上方。

我认为我对CSS网格做错了事，所以我应用了display: flex;，这给了我同样的问题。

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

Answer 1

Initial solution

SplitPane source code

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

.App {
    position: relative;
}

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

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

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

回复：

SplitPane缩小到不是真的大小   即使高度设置为100％也可以使用。

SplitPane中的内容不可见/可用，因为：

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

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

我已经为要点创建了test case。

所以，现在我们知道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 */
    ...
}

接下来的步骤将是确定您希望应用程序的外观和功能如何，并根据您的决定进行选择。要开始：

是否要将导航栏固定在视口的顶部？
如果不想使用滚动条，您想如何处理窗格中多余的内容？
您的网站适合移动设备吗？如果是这样，您想如何在小屏幕上显示拆分窗格？

回复：

在将标题下的所有空间分配给拆分视图时，如何更改为position: relative？

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

很难给出确切的答案，因为我不知道您要如何在没有滚动条的情况下处理超过100vh的观看内容。

回复：

[I] 不能使用display: grid或flex，因为它仍然会覆盖标头。

Flexbox / Grid无法正常工作，因为SplitPane与其兄弟姐妹不在同一个空间中。您必须将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"} }>

下一步

在此阶段，我唯一推荐的是将height: 100vh和width: 100vw添加到.App。

使用display：flex时，反应拆分窗格显示在其他组件之上

1 个答案: