css - 使用`display：flex`时反应拆分窗格显示在其他组件上方

问题描述

对于我的新反应项目，我需要一个拆分窗格。
我为此使用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;了这给了我同样的问题。

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

标签： cssreactjsflexboxcss-gridsplitpane

解决方案

拆分窗格源代码

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

.App {
    position: relative;
}

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

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

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

回应：

即使高度设置为 100%，SplitPane 也会缩小到无法真正使用的大小。

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

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 */
    ...
}

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

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

回应：

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

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

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

回应：

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

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

代码笔

.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.

css - 使用`display：flex`时反应拆分窗格显示在其他组件上方

问题描述

解决方案

推荐阅读