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>