10

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

6 回答 6

6

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

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

body {
    margin: 0;
    padding: 0;
}

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

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

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

于 2017-08-20T05:19:54.717 回答
3

已编辑

使用这个：

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

它适用于我的电脑。

于 2017-08-12T20:36:49.843 回答
1

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

于 2017-08-21T19:50:06.080 回答
0

class="label"div添加了一个30px的空间。它在您正在使用的 iframe 之外，但它占用了文档中的空间。在此处输入图像描述

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

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

希望这能解决您的问题。

于 2017-08-18T10:02:28.577 回答
0

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

这可能会有所帮助

于 2017-08-21T05:23:32.507 回答
0

用这个：

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

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

于 2017-08-21T20:12:53.703 回答