9

我想在一些固定文本下的页面中嵌入摩纳哥编辑器，我希望摩纳哥编辑器的高度完全填充页面的其余部分。人们在这里给了我一个答案：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 > *. 如果我们将它设置为max-height:100vhor height: 100vh，它在 Safari 中或多或少地工作（当焦点到达编辑器底部时会有点闪烁），而在 Chrome 中上下滚动时会显示一个滚动条。

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

4

3 回答 3

3

您可以一起使用vh和flex-grow：

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

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

编辑： Aha - Monico Editor 有一个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 hacks 的页面：是否有针对 safari 而不是 chrome 的 css hack？

于 2017-08-11T01:58:18.253 回答
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>
于 2017-08-22T19:31:13.103 回答
0

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

#container > * {
    overflow:auto;
    width:100%;
    height:100%;
}
于 2017-08-20T03:54:56.640 回答