根据浏览器适合的输入/输出格箱尺寸

Question

我下面的链接https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-make-two-divs-side-by-side-with-the-same-height提出两个股利框。我已经更新由https://stackoverflow.com/a/54632850/10220825建议的方法。最初，它是50％的比例既DIV箱尺寸。提交表单后它不未来50％的比例。请参阅下面的输出提交表单后。

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

另外，我用这些格框里面即textarea的codemirror编辑

<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>

如何让我的两个格框的大小或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%;
}

关键是使页面高度100％的柔性容器一起。这里有一个code pen，如果你想看到它的行动。