Bootstrap 使 textarea hight 匹配窗口高度

Question

我已经看到很多关于如何将 Textarea 高度设为 100% 的不同回复。我知道在 textarea 上使用“height: 100%”会将其自动调整为容器的高度。我正在使用 bootstrap 4 alpha6（但我认为解决方案也适用于 bootstrap 3）并且我有几个表单控件，自上而下排列，textarea 是最后一个控件，底部有一个提交按钮。

通过 bootstrap，我拥有深度 html 结构并使用 vuejs 组件组装我的页面。所以，我试图避免将每个容器从 body 开始设置为 height=100%，直到我到达 textarea 本身。

有没有办法让 textarea 在高度上自动调整大小以填充剩余的窗口空间。当我调整窗口大小时，文本区域也会扩大或收缩。我使用文本区域供用户输入 JSON 代码，我需要在屏幕尺寸上给他们尽可能多的高度空间。

谢谢。

Answer 1

这里有一个例子，你可以怎么做。

您需要稍微调整一下 clientHeight 属性并相应地调整大小。

我在这里使用过 jQuery。

要查看它的工作情况，请在全屏模式下查看以下 sn-p。

$(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>