让 Monaco Editor 填充页面的其余部分（跨浏览器）答案

【问题标题】：Let Monaco Editor fill the rest of the page (cross-browser)让 Monaco Editor 填充页面的其余部分（跨浏览器）
【发布时间】：2018-01-19 09:47:54
【问题描述】：

我想在某些固定文本下的页面中嵌入 Monaco Editor，我希望 Monaco Editor 的高度恰好填满页面的其余部分。人家给了我答案here: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 中完美运行，但由于 max-height:100% 的 #container > *，它不会在 Safari 中显示编辑器。如果我们将它设置为max-height:100vh 或height: 100vh，它在 Safari 中或多或少可以工作（当焦点到达编辑器底部时会有点闪烁），而在 Chrome 中上下滚动时会显示一个滚动条。

有没有人可以在 Chrome 和 Safari 中使用的解决方案？否则，是否可以只为 Chrome 或 Safari 设置特定规则？

【问题讨论】：

标签： css cross-browser height display monaco-editor

【解决方案1】：

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

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

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

编辑：啊哈 - Monico 编辑器有一个 fixedOverflowWidgets: true 和 can be set。这是最后的功能：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
  });
});

编辑：正如我在 cmets 中提到的，我无法访问 Safari，但这里有一个包含 Safari CSS hacks 的页面：is there a css hack for safari only NOT chrome?

【讨论】：

你能做一个工作的 JSBin 吗？我的测试表明这个设置完全溢出了......
固定文本和编辑器一起溢出了……你可以往下滚动看看……
我从未使用过 Monico Editor。你知道overflowingContentWidgets 是干什么用的吗？如果我们隐藏这些，很容易让它工作。 jsfiddle.net/pa8y2fzy/1
别在意最后的评论，我发现在启动 Monico 编辑器时可以设置另一个属性。查看更新的答案。
我发现了一些关于自动调整大小的帖子：1、2、3...也许这就是 Monaco Editor 的发展方向...

【解决方案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>

【讨论】：

【解决方案3】：

我无法在 Safari 中进行测试，但是当您始终希望它相对于容器为 100% 时，我看不出有任何理由使用最大高度/宽度。尝试简单地使用

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

【讨论】：