让摩纳哥编辑器填充页面的其余部分（跨浏览器）

Question

我想在页面中的一些固定文本下嵌入 Monaco Editor，我希望 Monaco Editor 的高度正好填满页面的其余部分。人们给了我一个答案 : 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 设置特定规则？

Answer 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. Here is the final functional thing: 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 hacks 的页面：is there a css hack for safari only NOT chrome?

Answer 2

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

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

Answer 3

最后，在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>

让摩纳哥编辑器填充页面的其余部分（跨浏览器）

Let Monaco Editor fill the rest of the page (cross-browser)

css

cross-browser

height

display

monaco-editor