Bootstrap 使 textarea 高度匹配窗口高度

Question

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

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

有没有办法让 textarea 在高度上自动调整大小以填充剩余的窗口空间。 当我调整窗口大小时，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>