让Monaco编辑器填满页面的其余部分（跨浏览器）

Question

让Monaco编辑器填满页面的其余部分（跨浏览器）

csscross-browserheightdisplaymonaco-editor

10

我希望将 Monaco 编辑器嵌入到某个页面中一些固定的文本下方，并且想要使 Monaco 编辑器的高度正好填满剩余部分。有人在这里给出了答案：这里，同时提供了一个JSBin示例：

<html>
    <style>
        html, body, .rb {
            margin: 0;
            height: 100%;
        }

        .rb {
            display: table;
            width: 100%;
            border-collapse: collapse;
        }

        .top, .myME {
            display: table-row;
        }

        .buffer {
            display: table-cell;
        }

        .top .buffer {
            background: lightblue;
            height:1%;
        }

        .myME .buffer {
            background: tomato;
        }

        #container {
            position:relative;
        }

        #container > * {
            overflow:auto;
            max-width:100%;
            max-height:100%;
        }
    </style>
    <body>
        <div class="rb">
            <div class="top">
                <div class="buffer">
                1<br/>2<br/>3<br/>4<br/>
                </div>
            </div>
            <div class="myME">
                <div class="buffer" id="container">
                </div>
            </div>
        </div>
    <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }})

        require(["vs/editor/editor.main"], function () {
          var editor = monaco.editor.create(document.getElementById('container'), {
            value: 'function x() {\n\tconsole.log("Hello world!");\n}',
            language: 'javascript',
            minimap: { enabled: false },
            automaticLayout: true,
            scrollBeyondLastLine: false
          });
        });
    </script>
    </body>
</html>

在Chrome中完美运行，但由于# container > *的max-height:100％，在Safari中无法显示编辑器。如果我们将其设置为max-height:100vh或height: 100vh，则在Safari中运行得更好（当焦点到达编辑器底部时会有一点闪烁），而在Chrome中上下滚动时会显示一个滚动条。

是否有人有既适用于Chrome又适用于Safari的解决方案？否则，是否可能只为Chrome或Safari设置特定规则？

- SoftTimur

3个回答

2

最后，在Chrome和Safari中，以下代码在向上和向下滚动时不会创建任何滚动条，当代码很长时，底部没有被隐藏的行，页脚始终位于底部而不受调整大小的影响。此外，重要的是要在独立的html文件中进行测试，而不是在JSBin中。

<html>
    <style>
    .rb {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .myME {
        flex:1;
        overflow: hidden;
    }

    .footer {
        flex-shrink: 0; 
        background:#f8f8f8;
        border-top: 1px solid #e7e7e7
    }
    </style>
    <body>
        <div class="rb">
            <div class="top">1<br/>2<br/>3<br/>4<br/></div>
            <div class="myME" id="container"></div>
            <div class="footer">haha</div>
        </div>
    <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }})

        require(["vs/editor/editor.main"], function () {
          var editor = monaco.editor.create(document.getElementById('container'), {
            value: 'function x() {\n\tconsole.log("Hello world!");\n}\nfunction x() {\n\tconsole.log("Hello world!");\n}\nfunction x() {\n\tconsole.log("Hello world!");\n}',
            language: 'javascript',
            minimap: { enabled: false },
            automaticLayout: true,
            scrollBeyondLastLine: false
          });
        });
    </script>
    </body>
</html>

- SoftTimur

0

我无法在Safari中进行测试，但我不认为有任何理由使用max-height/width，因为您始终希望它相对于容器为100％。尝试简单地使用

#container > * {
    overflow:auto;
    width:100%;
    height:100%;
}

- inarilo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan · Accepted Answer

您可以同时使用vh和flex-grow：

.rb {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}

.rb #container {
    flex-grow: 1; 
}

编辑：啊哈- Monico编辑器有一个fixedOverflowWidgets: true的选项可以进行设置。这是最终的功能性内容：https://jsfiddle.net/pa8y2fzy/3/

require.config({
  paths: {
    'vs': 'https://www.matrixlead.com/monaco-editor/min/vs'
  }
})

require(["vs/editor/editor.main"], function() {
  var editor = monaco.editor.create(document.getElementById('container'), {
    value: [
      'function x() {',
      '\tconsole.log("Hello world!");',
      '}'
    ].join('\n'),
    language: 'javascript',
    fixedOverflowWidgets: true
  });
});

编辑：如我在评论中提到的，我没有Safari的访问权限，但这里有一个包含Safari CSS hack的页面：is there a css hack for safari only NOT chrome?