摩纳哥编辑器的高度
[英]Height of the Monaco Editor
问题描述
我想做一个非常简单的摩纳哥编辑器： JSBin ：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.me {
height: 100vh;
}
</style>
</head>
<body>
<div class="me" id="container"></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 },
scrollBeyondLastLine: false
});
});
</script>
</body>
</html>
当我在 Chrome 中看到它并上下滚动时，整个窗口都有一个滚动条。 似乎是因为编辑器的高度大于窗口的高度。 我只是不想看到任何滚动条。 有谁知道如何实现这一目标？
编辑 1： Safari 10.1.2 中的屏幕截图， height: calc(100% - 24px)
解决方法：
在答案的帮助下，这是对我有用的解决方案：
1) 我们需要在一个独立的 html 文件中而不是在 JSBin 中测试这个
2）关键是使用overflow: hidden
3) 结果，下面的代码在上下滚动时没有创建任何滚动条，代码很长时底部没有隐藏的行：
<html>
<style>
body {
overflow: hidden;
}
.myME {
height: 100%
}
</style>
<body>
<div class="myME" id="container"></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>
6 个解决方案
解决方案1
3 2017-08-12 20:36:49
已编辑
使用这个：
.me {
position:absolute; left:0; top:0;
width:100%; height:100%; max-height:100% !important;
margin:0; padding:0;
overflow:hidden;
}
它适用于我的电脑。
解决方案2
3 已采纳 2017-08-20 05:19:54
我相信它只需将 body 的边距和填充设置为 0，并将 .me 的溢出设置为隐藏即可。
.me {
height: 100vh;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
这不会导致底部的线条不可见，因为 monaco 将为您处理滚动。
事实上，您获得本机滚动条只是因为这与 monaco 如何实现滚动条有关。 将编辑器容器的溢出设置为隐藏就可以正常工作。
PS 请记住，调整窗口大小时编辑器的大小不会改变，因此您必须检测调整大小并手动调用editor.layout() 。
解决方案3
1 2017-08-21 19:50:06
您可以设置编辑器的高度以适应屏幕并使用overflow: hidden; 在窗口上，随着overflow: auto; 在编辑器上
解决方案4
0 2017-08-18 10:02:28
class="label" div 添加了一个 30px 的空间。 它位于您正在使用的 iframe 之外，但它占用了文档中的空间。
因此，要解决您的问题，您必须通过从.me div 中减少它来调整编辑器中的 30px。
.me {
height:calc(100vh - 30px);
}
希望这能解决您的问题。
解决方案5
0 2017-08-21 05:23:32
更新你的 CSS 如下
.me {
height:50%;
position:relative;display:block
}
.me-parent{
position:absolute;
top:0;
left:0px;
right:0px;
height:100%;display:block;
}
并更新您的 html 结构如下
<div class="me-parent"><div class="me" id="container"></div></div>
在此处检查输出https://jsbin.com/timoyot/edit?html,output
这可能有帮助
解决方案6
0 2017-08-21 20:12:53
使用这个：
.me {
height: 100vh;
font-size: 16px;
}
body {
margin: 0;
padding: 0;
font-size: 0;
}
容器周围的空格会导致该错误。
摩纳哥编辑器中的虚拟键盘
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.