부트 스트랩 텍스트 영역 높이 일치 창 높이를

Question

Textarea 높이를 100 %로 만드는 방법에 대한 여러 가지 응답을 보았습니다. textarea에서 "height : 100 %"를 사용하면 컨테이너의 높이에 맞게 자동으로 크기가 조정된다는 것을 알고 있습니다. 부트 스트랩 4 알파 6을 사용하고 있습니다 (하지만 솔루션은 부트 스트랩 3에도 적용될 것입니다). 그리고 맨 아래에 정렬 된 두 개의 폼 컨트롤이 있습니다. 텍스트 영역은 맨 아래에 제출 버튼이있는 마지막 컨트롤입니다.

부트 스트랩으로 깊은 html 구조가 있고 vuejs 구성 요소를 사용하여 내 페이지를 어셈블합니다. 그래서, 나는 textarea 자체에 도달 할 때까지 body로부터 height = 100 %까지 모든 컨테이너를 설정하는 것을 피하려고합니다.

나머지 창 공간을 채우기 위해 텍스트 영역 자동 크기 자체를 높이로 만드는 방법이 있습니까? 창 크기를 조정하면 텍스트 영역도 확장되거나 축소됩니다. 사용자가 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>