logo标签列表

Monaco编辑器的高度

javascriptcssheightmonaco-editor
11

我想制作一个非常简单的 Monaco 编辑器：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)的屏幕截图

enter image description here

解决方案：

在回答的帮助下，以下是适用于我的解决方案：

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个回答
9
我认为只需将body的margin和padding设置为0，以及.me的overflow设置为hidden即可实现此功能。
.me {
    height: 100vh;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
}

这不会导致底部的行看不见，因为monaco会为你处理滚动。

实际上，你之所以获得本机滚动条，是因为这与monaco如何实现滚动相关。将编辑器容器的溢出设置为隐藏就可以正常工作。

P.S请记住，当您调整窗口大小时，编辑器的大小不会改变，因此您需要检测调整大小并手动调用 editor.layout()。

5

编辑

使用此选项：

.me {
    position:absolute; left:0; top:0;
    width:100%; height:100%; max-height:100% !important;
    margin:0; padding:0;
    overflow:hidden;
}

它在我的电脑上运行正常。

overflow:hidden 的问题在于当你写一个有很多行的文本时，文本的一部分会被隐藏在底部。这在Safari中尤其明显。这不是我想要的。 - SoftTimur
但是 98vh 是从哪里来的呢？ - SoftTimur
98vh 表示页面高度的 98%。 - Sajjad Sky
我使用绝对元素编辑了该元素，并且它可以正常工作。 - Sajjad Sky
1
你可以将编辑器的高度设置为适应屏幕，并在窗口上使用 overflow: hidden;，同时在编辑器上使用 overflow: auto;。
1

请按照以下方式更新您的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

这可能会有所帮助

0

class="label" div 添加了30像素的空间。它在您使用的iframe之外，但占据了文档中的空间。 enter image description here

因此，要解决您的问题，您需要通过从.me div中减少30像素来在编辑器中进行调整。

.me {
    height:calc(100vh - 30px);
}

希望这可以解决你的问题。

谢谢您。您能否为Safari创建一个可用的jsbin？我尝试过了，但对我来说不起作用。 - SoftTimur
我尝试了一下，在Safari中仍然可以向下滚动很远并看到滚动条。 - SoftTimur
尝试使用 https://jsbin.com/wemanalade/edit?html,output，对我来说它运行良好。 - Saravanan I
我在原帖中放了Safari的截图。 - SoftTimur
我刚刚克隆了一个新的jsBin https://jsbin.com/saxugipoqo/1/edit？html，output - Saravanan I
显示剩余11条评论
0
使用这个：
.me {
    height: 100vh;
    font-size: 16px;
}
body {
    margin: 0;
    padding: 0;
    font-size: 0;
}

容器周围的空格导致了那个错误。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接