Bootstrap 使文本区域高度与窗口高度匹配

Question

我见过很多关于如何使 Textarea 高度为 100% 的不同回复。据我所知，在文本区域上使用“高度：100％”会自动将其调整为容器的高度。我正在使用 bootstrap 4 alpha6（但我认为解决方案也适用于 bootstrap 3），并且我有几个表单控件，自上而下排列，文本区域是最后一个控件，底部有一个提交按钮。

使用 Bootstrap，我拥有深层 html 结构，并使用 vuejs 组件组装我的页面。因此，我试图避免将每个容器从 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>