Bootstrap make textarea высота высоты окна соответствия

Question

Я видел много разных ответов о том, как сделать Textarea высотой 100%. Я понимаю, что использование «height: 100%» в textarea автоматически изменит его на высоту контейнера. Я использую bootstrap 4 alpha6 (но я думаю, что решения применимы и к bootstrap 3), и у меня есть элементы управления формой, расположенные сверху вниз, причем текстовая область является последним элементом управления с кнопкой отправки внизу.

С бутстрапом У меня есть глубокая структура html и собираю мою страницу с помощью компонентов vuejs. Таким образом, я стараюсь не устанавливать каждый контейнер, начиная с тела, до высоты = 100%, пока не дойду до самой текстовой области.

Есть ли способ сделать autoarea textarea самой высотой, чтобы заполнить оставшееся пространство окна. Когда я изменяю размер окна, текстовое поле должно расширяться или сокращаться. Я использую текстовую область для пользователей, чтобы вводить код JSON, и мне нужно дать им как можно больше пространства высоты на размер экрана.

Спасибо.

Answer 1

Вот пример того, как вы можете это сделать.

Вам нужно будет немного поиграть с свойством clientHeight и соответствующим образом отрегулировать размер.

Я использовал jQuery здесь.

Чтобы увидеть это, просмотрите следующий сниппет в полноэкранном режиме.

$(document).ready(function() { 
 
    function ResizeTextArea() { 
 
    ClientHeight = window.innerHeight 
 
    $("#myTextArea").height(ClientHeight - ($("#myForm")[0].clientHeight - $("#myTextArea")[0].clientHeight + 30)); 
 
    } 
 

 
    $(window).resize(function() { 
 
    ResizeTextArea(); 
 
    }); 
 
    ResizeTextArea() 
 

 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container-fluid"> 
 
    <form id="myForm" class="form-horizontal"> 
 
    <div class="form-group"> 
 
     <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
 
     <div class="col-sm-10"> 
 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
 
     <div class="col-sm-10"> 
 
     <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-offset-2 col-sm-10"> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox">Remember me 
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="myTextArea" class="col-sm-2 control-label">Responsive TextArea</label> 
 
     <div class="col-sm-10"> 
 
     <textarea id="myTextArea" class="form-control" rows="3" style="height:auto;"></textarea> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>