摩纳哥编辑的身高

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中看到它并上下滚动时，整个窗口都有一个滚动条。似乎是因为编辑器的高度大于窗口的高度。我只是不想看到任何滚动条。有人知道如何实现这一目标吗？

Edit 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>

我想做一个非常简单的摩纳哥编辑器：JSBin：

Answer 1

[我相信它仅通过将主体的边距设置为零，并将.me的溢出隐藏起来即可。

Answer 2

3
投票

编辑

Answer 3

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

Answer 4

0
投票

如下更新您的CSS

Answer 5

0
投票

使用此：

Answer 6

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

摩纳哥编辑的身高

问题描述投票：6回答：6

6个回答

最新问题

摩纳哥编辑的身高

问题描述 投票：6回答：6

6个回答

最新问题

问题描述投票：6回答：6