Question

我已经看到很多关于如何使Textarea身高100％的不同反应。我明白使用＆＃34;身高：100％＆＃34;在textarea上将自动调整大小到容器的高度。我使用bootstrap 4 alpha6（但我认为解决方案也适用于bootstrap 3）我有几个表单控件，自上而下排列，textarea是最后一个控件，底部有一个提交按钮。

使用bootstrap我有深度html结构并使用vuejs组件组装我的页面。因此，我试图避免将每个容器从身体开始设置为高度= 100％，直到我到达textarea本身。

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

感谢。

Answer 1

以下是一个如何操作的示例。

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

我在这里使用了jQuery。

要查看它是否有效，请在全屏模式下查看以下代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap使textarea高度匹配窗口高度

1 个答案: