我想在一些固定文本下的页面中嵌入摩纳哥编辑器,我希望Monaco Editor的高度能够完全填充页面的其余部分.人们给了我一个答案
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中完美运行,但它不会在Safari中显示编辑器,因为max-height：100％的#container> *.如果我们将它设置为max-height：100vh或height：100vh,它在Safari中或多或少地起作用(当焦点到达编辑器的底部时稍微闪烁),而它在向上和向下滚动时显示滚动条铬.
有没有人有一个适用于Chrome和Safari的解决方案？否则,是否可以仅为Chrome或Safari设置特定规则？
解决方法
你可以一起使用vh和flex-grow：
.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?
