javascript - textareaの動的サイズ

Question

CodeMirror2エディターを使用しています。問題は、フルサイズ（100％; 100％）にできないことです。メインスタイルに追加しました：

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

そして、これはどのブラウザでも機能しません。いずれかの方法？

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

Answer 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、親のサイズに基づいてのサイズが設定されます。
いくつかの「パディング」を追加しましたが、削除または削減できます。

Answer 3

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

同様に機能するはずです。