Сodemirror 未将高度设置为 100%答案

【问题标题】：Сodemirror does not set the height to 100%Сodemirror 未将高度设置为 100%
【发布时间】：2021-08-10 23:56:12
【问题描述】：

我用这个代码

在 HTML/JS 中初始化新的 codemirror 元素：

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

在 CSS 中为 codemirror 设置高度：

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

但是 codemirror 只填充了 50% 的高度。为什么以及如何解决这个问题？

【问题讨论】：

标签： javascript html css codemirror

【解决方案1】：

您似乎错过了页面的一些样式。如果您使用以下 CSS，CodeMirror 将采用 100% 的高度和宽度。

    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>

【讨论】：