大佬教程收集整理的这篇文章主要介绍了css – 让Monaco Editor填充页面的其余部分(跨浏览器)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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中完美运行,但它不会在Safari中显示编辑器,因为max-height：100％的#container> *.如果我们将它设置为max-height：100vh或height：100vh,它在Safari中或多或少地起作用(当焦点到达编辑器的底部时稍微闪烁),而它在向上和向下滚动时显示滚动条铬.
有没有人有一个适用于Chrome和Safari的解决方案？否则,是否可以仅为Chrome或Safari设置特定规则？
.rb { display: flex; flex-direction: column; height: 100vh; margin: 0; } .rb #container { flex-grow: 1; }
编辑：Aha – Monico Editor有一个fixedOverflowWidgets：真是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'),fixedOverflowWidgets: true }); });
编辑：正如我在评论中提到的,我无法访问Safari,但这里有一个Safari CSS hacks的页面：is there a css hack for safari only NOT chrome?
以上是大佬教程为你收集整理的css – 让Monaco Editor填充页面的其余部分(跨浏览器)全部内容，希望文章能够帮你解决css – 让Monaco Editor填充页面的其余部分(跨浏览器)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。