Динамический размер текстовой области

Question

Я использую CodeMirror 2 редактор. Проблема в том, что я не могу сделать это в натуральную величину (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%;
}

Должно работать так же.