CodeMirror 没有完全向下滚动，Cursor 隐藏在 div 后面答案

【问题标题】：CodeMirror doesn't scroll down completely, Cursor is hidden behind divCodeMirror 没有完全向下滚动，Cursor 隐藏在 div 后面
【发布时间】：2015-09-05 03:05:41
【问题描述】：

我想在浏览器窗口的全屏模式下使用非常出色的文本编辑器 CodeMirror，我想为某种菜单添加一个固定的标题 - 或者至少为几个按钮留出空间具有一些功能。

所以我在顶部添加了一个带有“位置：固定”的 div，并在带有 codemirror 对象的 div 中添加了一个 padding-top。当有足够的文本滚动发生时，问题就出现了。向下移动光标/向上滚动内容并再次向上移动光标后，光标移到 div 后面，但内容不会完全向下滚动。光标被隐藏，我看不到内容。只有通过滚动条滚动才有效。

我需要用固定的 div 更改 html/css 吗？还是我需要检查光标是否在 div 后面/下面，我必须让 CodeMirror 手动滚动？我试过这个，但没有设法以编程方式做到这一点:-(

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel=stylesheet href="http://codemirror.net/doc/docs.css">
    <link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
    <script src=http://codemirror.net/lib/codemirror.js></script>
    <script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
    <style type=text/css>
        .CodeMirror {float: left; width: 100%; height: 100%; }
    </style>  
</head>
<body>
  <div style="position: fixed; height: 28px; z-index:999; width: 100%; background: lightgray;">
    <button>Some action</button>
  </div>
  <div style="padding-top: 23px">
    <textarea id=content name="content"></textarea>
  </div>
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
        mode: 'application/x-httpd-php',
        lineNumbers: true
      });
    </script>
  </body>
</html>

也可以在这里查看：http://jsfiddle.net/fxvef3bw/1/

【问题讨论】：

标签： javascript html css codemirror

【解决方案1】：

我自己找到了解决办法。

我没有使用两个重叠的 div，而是使用了两个 div（不重叠），样式为“position: absolute”。它们不重叠，所以滚动没问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel=stylesheet href="http://codemirror.net/doc/docs.css">
    <link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
    <script src=http://codemirror.net/lib/codemirror.js></script>
    <script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
    <style type=text/css>
        .CodeMirror {float: left; width: 100%; height: 100%; }
    </style>  
</head>
<body>
    <div style="padding: 1px; position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; height: 24px; background: lightgrey;">
        <button>some action</button>
    </div>
    <div style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 28px; bottom: 0px; width: auto; height: auto; ">
        <textarea id="content" name="content" style="display: none;"></textarea>
    </div>
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
        mode: 'application/x-httpd-php',
        lineNumbers: true
      });
    </script>
  </body>
</html>

更新的 jsfiddle 在这里：http://jsfiddle.net/fxvef3bw/2/

我希望我能得到一些关于绝对位置可能的副作用或缺点的信息。否则对我来说似乎很好。

【讨论】：