Search code examples
javascripthtmlcsscodemirror

Сodemirror does not set the height to 100%

I use this code

Initialize new codemirror element in 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>

Set height for codemirror in CSS:

.CodeMirror {
    font-size: 1em;
    float: left;
    width: 100%; 
    height: 100%;
}
.cm-wrap { height: 100% }
.cm-scroller { overflow: auto }

But codemirror only fills 50% of the height. Why and how to fix this?

Solution

  • It looks like you missed some styles for the page. If you use the following CSS, CodeMirror will take 100% height and width.

        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>