yo uso este codigo
Inicialice el nuevo elemento codemirror en HTML/JS:
<body> <div id="code"></div> <script> var editor = CodeMirror(document.getElementById('code'), { lineNumbers: true, lineWrapping: false, matchBrackets: true, closeBrackets: true, autoCloseBrackets: true, styleActiveLine: true, mode: "text/x-csrc", }); </script> </body>Establecer altura para codemirror en CSS:
.CodeMirror { font-size: 1em; float: left; width: 100%; height: 100%; } .cm-wrap { height: 100% } .cm-scroller { overflow: auto }Pero codemirror solo llena el 50% de la altura. ¿Por qué y cómo solucionar esto?
Parece que te perdiste algunos estilos para la página. Si usa el siguiente CSS, CodeMirror tomará el 100% de alto y ancho.
html { height: 100%; width: 100%; min-width: 100%; min-height: 100%; } body { height: 100%; width: 100%; } #code { height: 100%; width: 100%; } .CodeMirror { font-size: 1em; float: left; width: 100%; height: 100%; } .cm-wrap { height: 100% } .cm-scroller { overflow: auto } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css" integrity="sha512-6sALqOPMrNSc+1p5xOhPwGIzs6kIlST+9oGWlI4Wwcbj1saaX9J3uzO3Vub016dmHV7hM+bMi/rfXLiF5DNIZg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> html { height: 100%; width: 100%; min-width: 100%; min-height: 100%; } body { height: 100%; width: 100%; } #code { height: 100%; width: 100%; } .CodeMirror { font-size: 1em; float: left; width: 100%; height: 100%; } .cm-wrap { height: 100% } .cm-scroller { overflow: auto } </style> </head> <body> <div id="code"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js" integrity="sha512-hGVnilhYD74EGnPbzyvje74/Urjrg5LSNGx0ARG1Ucqyiaz+lFvtsXk/1jCwT9/giXP0qoXSlVDjxNxjLvmqAw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var editor = CodeMirror(document.getElementById('code'), { lineNumbers: true, lineWrapping: false, matchBrackets: true, closeBrackets: true, autoCloseBrackets: true, styleActiveLine: true, mode: "text/x-csrc", }); </script> </body> </html>