根据浏览器调整输入/输出div框大小
提问于 2019-02-11 14:03:56
我沿着链接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文本区域编辑器，即
<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文本区域大小
回答 1
Stack Overflow用户
发布于 2019-02-11 14:33:54
使用示例代码，您可以尝试执行以下操作，但必须删除在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%与flex容器一起。如果你想看看它的实际效果，这里有一个code pen。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54632279
复制相关文章
点击加载更多
腾讯云开发者
