textarea的动态大小答案

【问题标题】：Dynamical size of textareatextarea的动态大小
【发布时间】：2011-03-20 08:50:39
【问题描述】：

我正在使用CodeMirror 2 编辑器。问题是我不能让它全尺寸（100%；100%）。我在主样式中添加了：

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

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

【问题讨论】：

标签： javascript html size codemirror

【解决方案1】：

我在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'
});

【讨论】：

【解决方案2】：

你不能用 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 的大小。
添加了一些“填充”，但您可以删除或减少它。

【讨论】：

@Ock - textarea 是如何定义的？它有ID吗？父元素？它在我拉的快速测试中对我有用。
使用过 CodeMirror？因为它用他自己的 div 包裹了 textarea。
我明白，但这不适用于 CodeMirror，而且问题与 codemirror 相关:)
这通常有效，只是假设您可以直接访问生成的 textarea 元素 - 抱歉！ :)

【解决方案3】：

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

应该也可以。

【讨论】：