javascript - 根据浏览器调整输入/输出 div 框大小

Question

我正在关注链接 https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-make-two-divs-side-by-side-with-the-same-height制作两个 div 框。我已经更新了 https://stackoverflow.com/a/54632850/10220825 建议的方法.最初它与两个 div 框大小的比例为 50%。提交表格后，它不会达到 50% 的比例。提交表单后查看以下输出。

.flex-container{ width:100%;min-height: 650px;}
textarea {
  width: 100%;
  height: 100%;
}

此外，我还在这些 div 框内使用 codemirror textarea 编辑器，即

<div class="flex-container">
     <div class="column">   
          <textarea id="editor" ></textarea>
          <script>
            var cm = CodeMirror.fromTextArea(document.getElementById('editor'),{mode:"text/x-java",lineNumbers:true})           
            //cm.setSize("800", "500");</script>
       </div> 
     <div class="column bg-alt">
            <textarea id="editor2" ></textarea> 
            <script>
                var cm2 = CodeMirror.fromTextArea(document.getElementById('editor2'),{
                mode:"text/x-java"  });
                //cm2.setSize("800", "500")             
            </script>
    </div>
</div>

如何在提交表单后使我的 div 框大小或 codemirror textarea 大小与浏览器/桌面屏幕固定

Answer 1

使用您的示例代码，您可以尝试以下操作，但您必须删除您在 textarea 元素上设置的硬高度和宽度。

CSS

body, html{
  margin:0px;
  height:100%;
}
.flex-container {
  width: 100%;
  min-height:100%;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
}
.flex-container .column {
  background: #dbdfe5;
  -webkit-flex: 1
  -ms-flex: 1
  flex: 1;
}
.flex-container .column.bg-alt {
  background: #b4bac0;
}
textarea {
  width: 100%;
  height: 100%;
}

关键是让页面高度和flex容器一起100%。这是一个 code pen如果您想看到它的实际效果。