React+Antd项目MonacoEditor仅显示5px高，自定义高度无效求助

核心问题分析 #

你的代码已经做了不少正确设置，但MonacoEditor仅显示5px高度，核心原因是父级容器高度未正确传递，以及绝对定位的编辑器未配置完整的填充规则。

具体修复步骤 #

1. 给Tabs组件设置明确高度
   TabPane的height: calc(100% - 50px)依赖父容器（Tabs）的高度，必须给Tabs添加高度样式，示例：

   <Tabs style={{ height: '100vh' }}> {/* 可根据实际布局调整为具体数值 */}
     {/* 你的TabPane代码 */}
   </Tabs>
   

2. 强化编辑器容器的高度继承
   给包裹MonacoEditor的div补充height: '100%'，确保flex布局的高度能完全传递到容器：

   <div style={{
       flex: 1,
       border: '1px solid #e8e8e8',
       margin: '0 10px 10px 10px',
       position: 'relative',
       minHeight: '500px',
       overflow: 'hidden',
       height: '100%' // 新增：明确容器高度继承父级
   }}>
   

3. 优化MonacoEditor的定位样式
   移除冗余的minHeight（已在父容器设置），同时给绝对定位的编辑器添加四边固定规则，确保填满容器：

   <MonacoEditor
       style={{
           width: '100%',
           height: '100%',
           position: isFullscreenEditor ? 'fixed' : 'absolute',
           top: 0, // 新增：固定四边实现填充
           left: 0,
           right: 0,
           bottom: 0,
           zIndex: isFullscreenEditor ? 1000 : 1,
       }}
       // 其他属性保持不变
   />
   

4. 确认自动布局选项生效
   已开启的automaticLayout: true会让MonacoEditor自动适配容器大小，不要关闭该选项。

完整修改后的代码片段 #

<Tabs style={{ height: '100vh' }}>
  <TabPane
      tab="Код"
      key="code"
      style={{
          height: 'calc(100% - 50px)',
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden'
      }}
  >
      <div style={{
          flex: 1,
          border: '1px solid #e8e8e8',
          margin: '0 10px 10px 10px',
          position: 'relative',
          minHeight: '500px',
          overflow: 'hidden',
          height: '100%'
      }}>
          <MonacoEditor
              style={{
                  width: '100%',
                  height: '100%',
                  position: isFullscreenEditor ? 'fixed' : 'absolute',
                  top: 0,
                  left: 0,
                  right: 0,
                  bottom: 0,
                  zIndex: isFullscreenEditor ? 1000 : 1,
              }}
              language={selectedLanguage}
              theme="vs-dark"
              value={code}
              onChange={handleCodeChange}
              editorDidMount={(editor) => {
                  editorRef.current = editor;
              }}
              options={{
                  automaticLayout: true,
                  fontSize: 14,
                  minimap: {enabled: true},
                  scrollBeyondLastLine: false,
                  wordWrap: 'on',
                  formatOnPaste: true,
                  formatOnType: true,
                  tabSize: 2,
                  rulers: [80],
                  bracketPairColorization: {enabled: true},
                  autoIndent: 'full',
                  showFoldingControls: 'always'
              }}
          />
      </div>
  </TabPane>
</Tabs>

额外注意事项 #

• 若页面还有外层容器，需同步给外层容器设置明确高度，避免100%高度失效。
• 全屏模式下，fixed定位的编辑器可通过top:0; left:0; right:0; bottom:0实现全屏覆盖视口。

内容的提问来源于stack exchange，提问作者Таир