Установите размер поля ввода / вывода в соответствии с браузером - PullRequest
Новая
       13

Установите размер поля ввода / вывода в соответствии с браузером

0 голосов
/ 11 февраля 2019

Я перехожу по ссылке 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.Изначально это соотношение составляет 50% к размеру обоих блоков.После отправки формы не приходит соотношение 50%.См. Ниже вывод после отправки формы. 

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

Также я использую редактор текстовой области codemirror внутри этих блоков div, то есть 

<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 Ответ

0 голосов
/ 11 февраля 2019

Используя ваш пример кода, вы можете попробовать следующее, но вам придется удалить жесткую высоту и ширину, которые вы устанавливаете для своих 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% вместе с гибким контейнером.Вот кодовое перо , если вы хотите увидеть его в действии.

...