在Tabs中填充高度react-bootstrap

Question

我正在使用 React Bootstrap。 我有一个全屏模态框，它的主体中有一个 和 。 我想在其中一个选项卡中创建一个词法编辑器，该编辑器应填充模式主体的 100% 宽度和高度（带有一些边距）。

这是我的简化代码：

从选项卡

<Tabs defaultActiveKey="description" className="mt-3">
    <Tab className="text-center m-5 h-100" eventKey="description" title={t("exposition.description")}>
                <TextEditor t={t} />
     </Tab>
</Tabs>

从文本编辑器

<LexicalComposer initialConfig={initialConfig} className="h-100">
            <RichTextPlugin
                contentEditable={<ContentEditable className="h-100" />}
                placeholder={
                    <div className="h-100">{t("editor.placeholder")}</div>
                }
                ErrorBoundary={LexicalErrorBoundary}
            />
</LexicalComposer>

完整代码

如你所见，我尝试将所有内容都放在 h-100 中。但这没有用。 然后我尝试在 .tab-pane 和 .tab-content 上添加一些 CSS3，但高度的正确百分比因设备而异，因此它没有响应。 我也尝试了这个问题

的解决方案

Answer 1

Bootstrap 中的“h-100”类将元素的高度调整为其父元素高度的 100%。例如，如果将包装器的高度设置为 20rem 并将“h-100”类应用于其子级，则这些子级将继承 20rem 的高度。但是，需要注意的是，此类仅影响直接子元素，而不影响层次结构中的后代元素。因此，您还应该根据需要将“h-100”班级应用于每个级别的孩子。在这种特定情况下，您应该将“h-100”类应用于 TextEditor 组件。