让摩纳哥编辑器填充页面的其余部分（跨浏览器） [英] Let Monaco Editor fill the rest of the page (cross-browser)
问题描述
我想在页面的某些固定文本下嵌入摩纳哥编辑器，我希望摩纳哥编辑器的高度能完全填充页面的其余部分。人们在此处给了我一个答案： JSBin ：
I want to embed a Monaco Editor in a page under some fixed texts, I want the height of the Monaco Editor to fill exactly the rest of the page. People gave me an answer 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浏览器中可完美运行，但由于<$ c $，它无法在Safari中显示编辑器c>最大高度： #container>的100％ * 。如果将其设置为 max-height：100vh 或 height：100vh ，则它在Safari中或多或少地起作用（当焦点到达编辑器底部时会闪烁一点），而在Chrome中上下滚动时会显示一个滚动条。
It works perfectly in Chrome, but it does not display the editor in Safari because of max-height:100% of #container > *. If we set it to max-height:100vh or height: 100vh, it works more or less in Safari (with a little bit flashing when the focus reaches the bottom of the editor), whereas it shows a scroller while scrolling up and down in Chrome.
有人能解决此问题吗？都在Chrome和Safari中使用？否则，是否可以只为Chrome或Safari设置特定规则？
Does anyone have a solution that works both in Chrome and Safari? Otherwise, is it possible to set specific rule for Chrome or Safari only?
推荐答案
最后，在Chrome和Safari中，以下代码不会在上下滚动时创建任何滚动条，当代码较长时，底部不会隐藏任何行，无论调整大小，页脚始终位于底部。另外，在独立的html文件中而不是在JSBin中对其进行测试也很重要。
Finally, in Chrome and Safari, the following code does not create any scroll bar while scrolling up and down, there are no lines hidden in the bottom when the code is long, the footer is always at the bottom regardless of resizing. Additionally, it is important to test it in an independent html file rather than in 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>
这篇关于让摩纳哥编辑器填充页面的其余部分（跨浏览器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
