gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 10:58:00 27 4
gpt4 key购买 nike

我想在页面中的一些固定文本下嵌入 Monaco Editor,我希望 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 中完美运行,但由于 #container > *max-height:100% 而无法在 Safari 中显示编辑器。如果我们将它设置为 max-height:100vhheight: 100vh,它在 Safari 中或多或少地工作(当焦点到达底部时有点闪烁编辑器),而它在 Chrome 中上下滚动时显示滚动条。

有没有人有同时适用于 Chrome 和 Safari 的解决方案?否则,是否可以仅针对 Chrome 或 Safari 设置特定规则?

最佳答案

你可以同时使用vhflex-grow:

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

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

编辑啊哈 - Monico 编辑器有一个 fixedOverflowWidgets: true 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'),
language: 'javascript',
fixedOverflowWidgets: true
});
});

编辑:正如我在评论中提到的,我无法访问 Safari,但这是一个包含 Safari CSS hack 的页面:is there a css hack for safari only NOT chrome?

关于css - 让 Monaco Editor 填充页面的其余部分(跨浏览器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45625660/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com