javascript - 使用 CodeMirror 模块时无法调整 HTML textarea 元素的大小

Question

我有一个 textarea在我的HTML .对于元素，我使用 codemirror.js和 codemirror.css模块(CodeMirror )。

<md-content flex style="display: flex; flex-flow: column;">
    <textarea id="textArea" style="flex:1"></textarea>
</md-content>

我使用单独的 JavaScript 文件来操作模块。

var textArea = document.getElementById('textArea');
CodeMirror.fromTextArea(textArea, {
  lineNumbers: true
}); 

当我在浏览器中打开它时，文本区域会自动在窗口中水平填充而不是垂直填充(宽度:100% 和高度:50%)。我尝试添加 <style>并设置宽度和高度。但它没有任何改变。

<textarea id="textArea" style="flex:1; width:200px; height:300px"></textarea>

此外，我尝试使用 JavaScript 更改 CSS，同样，它没有更改元素的大小。

textArea.style.width = 200;
textArea.style.height = 300;

我想要那个<textarea>填写在<md-content>内，这就是我使用 flex:1 的原因.我如何更改大小以填充父标签的区域(与父标签大小相同 md-content )。

这是 complete code

Answer 1

https://jsfiddle.net/e86pztkh/1/

.CodeMirror {
  position: relative !important;
  height: 100% !important;
}
html, body{ 
  min-height: 100%;
  position: relative;
  height: 100%;

不确定您是否在本地有 codemirror css 文件，如果您有的话，只需修改它并转储 !important 声明。