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文本区域大小

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。

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

1 个答案: