Question

我正在使用CodeMirror 2编辑器。麻烦的是我不能把它变成全尺寸（100％; 100％）。我添加了主要风格：

.CodeMirror {
    height: 100%;
    width: 100%;
}

这对我来说在任何浏览器中都不起作用。有什么方法吗？

Answer 1

您不能使用CSS，而是可以使用JavaScript：

window.onload = function() {
    var oTextarea = document.getElementById("myText");
    var oParent = oTextarea.parentNode;
    oTextarea.style.width = (oParent.scrollWidth - 30) + "px";
    oTextarea.style.height = (oParent.scrollHeight - 30) + "px";
};

这将根据其父级大小设置textarea的大小添加了一些“填充”，但您可以删除或减少它。

Answer 2

我在http://jsbin.com中使用以下代码来拉伸CodeMirror框架（请注意，JS Bin特别延伸到半屏宽度，但下面的示例代码执行“全屏”）：

.CodeMirror {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

我不记得默认情况下CodeMirror是否添加了该类，但如果没有，您还需要在JavaScript中添加它（假设您尚未解决此问题）：

CodeMirror.fromTextArea('ID_OF_TEXTAREA', {
  // .. some other options...
  iframeClass: 'CodeMirror'
});

Answer 3

html, body, .container, .subContainer, .CodeMirror {
    height: 100%;
    width: 100%;
}

也应该有效。

textarea的动态大小

3 个答案: