javascript - textarea的动态大小

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%;
}

也应该工作。