摩納哥編輯器的高度
[英]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.