Altura del Editor de Mónaco

Quiero hacer un Editor Mónaco muy simple: 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> 

Cuando lo veo en Chrome y me desploop hacia arriba y hacia abajo, hay una barra de desplazamiento para toda la window. Parece que es porque la altura del editor es mayor que la altura de la window. Simplemente no quiero ver ningún scrollers. ¿Alguien sabe como lograr esto?

Editar 1: una captura de pantalla en Safari 10.1.2 con height: calc(100% - 24px)

enter image description here

Solución:

Con la ayuda de las respuestas, aquí está la solución que funciona para mí:

1) tenemos que probar esto en un file html independiente en lugar de en un JSBin

2) la key es usar overflow: hidden

3) como resultado, el siguiente código no crea ninguna barra de desplazamiento mientras se desplaza hacia arriba y hacia abajo, no hay líneas ocultas en la parte inferior cuando el código es largo:

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

Creo que funciona simplemente estableciendo el margen y el relleno del cuerpo en 0, y el exceso de .me se oculta.

 .me { height: 100vh; overflow: hidden; } body{ margin:0; padding:0; } 

Esto no hará que sus líneas en el background sean invisibles, ya que monaco manejará el desplazamiento por usted.

De hecho, está obteniendo la barra de desplazamiento nativa solo porque eso tiene algo que ver con la forma en que monaco implementa las herramientas de desplazamiento. Configurar el desbordamiento del contenedor del editor a oculto funcionará bien.

PD Tenga en count que el tamaño del editor no cambiará cuando cambie el tamaño de la window, por lo que debe detectar el cambio de tamaño y llamar al editor.layout() manualmente.

EDITADO

Usa este :

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

Funciona en mi computadora.

Puede configurar la altura del editor para que se ajuste a la pantalla y usar overflow: hidden; en la window, junto con el overflow: auto; en el editor

Actualice su CSS de la siguiente manera

 .me { height:50%; position:relative;display:block } .me-parent{ position:absolute; top:0; left:0px; right:0px; height:100%;display:block; } 

y actualice su estructura html como se muestra a continuación

 <div class="me-parent"><div class="me" id="container"></div></div> 

Verifique la salida aquí https://jsbin.com/timoyot/edit?html,output

esto puede ayudar

Utilizar esta:

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

Los espacios en blanco alnetworkingedor del contenedor causan ese error.

Hay un espacio de 30 px agregado por la div class="label" . está fuera del iframe que está utilizando, pero ocupa el espacio del documento. enter image description here

Para resolver su problema, debe ajustar 30px en el editor networkinguciéndolo del .me div.

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

Espero que esto solucione tu problema.