Question

我想在一些固定文本下的页面中嵌入摩纳哥编辑器，我希望Monaco编辑器的高度能够完全填充页面的其余部分。人们给了我一个答案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设置特定规则？

Answer 1

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

Answer 2

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

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

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

修改：Aha - 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
  });
});

修改：正如我在评论中提到的，我无法访问Safari，但这里有一个包含Safari CSS黑客的页面：is there a css hack for safari only NOT chrome?

Answer 3

我无法在Safari中测试但是当你总是希望它相对于容器100％时，我没有看到任何使用max-height / width的理由。尝试使用

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

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

3 个答案: