摩纳哥编辑器的高度

Question

我想做一个很简单的摩纳哥编辑器：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>

Answer 1

已编辑

使用这个：

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

它可以在我的电脑上运行。

Answer 2

class="label" div 添加了一个 30px 的空间。它在您正在使用的 iframe 之外，但它占用了文档中的空间。

因此，要解决您的问题，您必须在编辑器中调整 30px，方法是从 .me div 中减少它。

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

希望这能解决您的问题。

Answer 3

我相信只需将正文的边距和填充设置为 0，并将 .me 的溢出设置为隐藏即可。

.me {
    height: 100vh;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
}

这不会导致您在底部的线条不可见，因为 monaco 会为您处理滚动。

事实上，您获得本机滚动条只是因为这与 monaco 如何实现滚动内容有关。将编辑器容器的溢出设置为隐藏即可。

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

Answer 4

如下更新你的 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

这可能会有所帮助

Answer 5

您可以设置编辑器的高度以适应屏幕并在窗口上使用overflow: hidden;，在编辑器上使用overflow: auto;

Answer 6

使用这个：

.me {
    height: 100vh;
    font-size: 16px;
}
body {
    margin: 0;
    padding: 0;
    font-size: 0;
}

容器周围的空格会导致该错误。