CodeMirror 5.62.3编辑器滚动条失效及高度异常问题求助

问题原因分析 #

1. 高度不符合预期：元素设置height:100%时，需要所有父元素（包括html、body）明确设置高度，否则100%没有参照基准，无法生效。
2. 滚动条静止失效：父元素高度未正确配置导致CodeMirror内部高度计算错误，同时CSS与JS重复设置高度引发冲突，打断滚动逻辑。

解决方案 #

步骤1：配置根元素高度

给html和body添加样式，确保它们占满视口高度，同时清除默认边距避免布局偏移：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 避免页面整体出现冗余滚动条 */
}

步骤2：统一高度设置逻辑

选择单一方式设置CodeMirror高度，避免CSS与JS重复配置。保留JS的setSize方法，同时确保容器#editor占满父元素高度：

#editor {
    height: 100%;
}

移除CSS中.CodeMirror的height:100%设置，消除冲突。

步骤3：调整滚动相关样式

CodeMirror自身会处理内部滚动逻辑，无需额外设置overflow:auto，保留自定义样式即可：

.CodeMirror {
    line-height: 28px;
    font-family: Lucida Console;
}

修改后的完整代码 #

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/monokai.min.css">
        <title>something</title>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            #editor {
                height: 100%;
            }
            .CodeMirror {
                line-height: 28px;
                font-family: Lucida Console;
            }
        </style>
    </head>
    <body>
        <div id="editor"></div>
        <script>
            var editor = CodeMirror(document.getElementById("editor"), {
                mode: "text/x-js",
                lineNumbers: true,
                indentUnit: 4,
                tabSize: 4,
                theme: "monokai",
                lineWrapping: true,
                value: '// This is a sample comment.\nfunction sampleRecord(x, y) {\n    this.x = x;\n    this.y = y;\n}\nconsole.log("Hello, World!");\n// Some extra lines to make the scrollbar longer\n\n\n\n\n\n\n\n\n// test'
            });
            editor.setSize("50%", "100%");
        </script>
    </body>
</html>

效果验证 #

修改后编辑器会占满视口高度的50%宽度，内容超出编辑器高度时，滚动条可正常拖动实现内容滚动。

内容的提问来源于stack exchange，提问作者winscripter