admin管理员组文章数量:1192347
I want to make a very simple Monaco Editor: JSBin:
<!DOCTYPE html>
<html>
<head>
<script src=".min.js"></script>
<script src=".6.4/angular.min.js"></script>
<style>
.me {
height: 100vh;
}
</style>
</head>
<body>
<div class="me" id="container"></div>
<script src=".js"></script>
<script>
require.config({ paths: { '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>
When I see it in Chrome and scroll up and down, there is a scroller for the whole window. It seems that it is because the height of the editor is larger than the height of the window. I just don't want to see any scrollers. Does anyone know how to achieve this?
Edit 1: a screenshot in Safari 10.1.2 with height: calc(100% - 24px)
Solution:
With the help of the answers, here is the solution working for me:
1) we need to test this in an independent html file rather than in a JSBin
2) the key is to use overflow: hidden
3) as a result, 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:
<html>
<style>
body {
overflow: hidden;
}
.myME {
height: 100%
}
</style>
<body>
<div class="myME" id="container"></div>
<script src=".js"></script>
<script>
require.config({ paths: { '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>
I want to make a very simple 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>
When I see it in Chrome and scroll up and down, there is a scroller for the whole window. It seems that it is because the height of the editor is larger than the height of the window. I just don't want to see any scrollers. Does anyone know how to achieve this?
Edit 1: a screenshot in Safari 10.1.2 with height: calc(100% - 24px)
Solution:
With the help of the answers, here is the solution working for me:
1) we need to test this in an independent html file rather than in a JSBin
2) the key is to use overflow: hidden
3) as a result, 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:
<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 Answers
Reset to default 9 +50I believe it works just by setting body's margin and padding to 0, and the .me's overflow to hidden.
.me {
height: 100vh;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
This won't cause your lines in the bottom invisible, since monaco will handle the scrolling for you.
In fact you are getting the native scrollbar just because that has something to do with how monaco get the scrolling stuffs implemented. Setting the editor container's overflow to hidden will just work fine.
P.S Keep in mind that the editor's size won't change when you resize the window, so you have to detect the resizing and call editor.layout() manually.
EDITED
Use this one :
.me {
position:absolute; left:0; top:0;
width:100%; height:100%; max-height:100% !important;
margin:0; padding:0;
overflow:hidden;
}
It works on my computer.
Update your CSS as below
.me {
height:50%;
position:relative;display:block
}
.me-parent{
position:absolute;
top:0;
left:0px;
right:0px;
height:100%;display:block;
}
and update your html structure as below
<div class="me-parent"><div class="me" id="container"></div></div>
Check output here https://jsbin.com/timoyot/edit?html,output
this may help
You can set the height of the editor to fit the screen and use overflow: hidden; on the window, along with overflow: auto; on the editor
Use this:
.me {
height: 100vh;
font-size: 16px;
}
body {
margin: 0;
padding: 0;
font-size: 0;
}
Whitespaces around the container cause that bug.
There is a 30px space added by the class="label" div. it is outside the iframe which you are using but it takes the space in the document.
So to solve your issue you have to adjust 30px in the editor by reducing it from the .me div.
.me {
height:calc(100vh - 30px);
}
Hope this will solve your issue.
本文标签： javascriptHeight of the Monaco EditorStack Overflow
版权声明：本文标题：javascript - Height of the Monaco Editor - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738426258a2086142.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论