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

<强> EDITED

使用这个：

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

它适用于我的电脑。

Answer 2

我相信只需将body的边距和填充设置为0，然后将.me溢出隐藏。

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

body {
    margin: 0;
    padding: 0;
}

这不会导致底部的线条不可见，因为摩纳哥将为您处理滚动。

事实上，你正在获取原生滚动条只是因为这与摩纳哥如何实现滚动内容有关。将编辑器容器的溢出设置为隐藏将正常工作。

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

Answer 3

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

Answer 4

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

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

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

希望这能解决您的问题。

Answer 5

更新您的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 6

使用此：

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

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

摩纳哥编辑的高度

6 个答案: