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

Question

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

Sof*_*mur 9 css height cross-browser display monaco-editor

我想在一些固定文本下的页面中嵌入一个摩纳哥编辑器,我希望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>

Run Code Online (Sandbox Code Playgroud)

它完美的作品在Chrome中,但它并没有显示,因为Safari浏览器中编辑max-height:100%的#container > *.如果我们将它设置为max-height:100vh或者height: 100vh,它在Safari中或多或少地起作用(当焦点到达编辑器的底部时稍微闪烁),而在Chrome中上下滚动时它会显示一个滚动条.

有没有人有一个适用于Chrome和Safari的解决方案？否则,是否可以仅为Chrome或Safari设置特定规则？

Answer 1

Sof*_*mur 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，1 月前
查看次数：	835 次
最近记录：	8 年前