調整瀏覽器窗口大小時，Textarea 自動調整大小以適應內容

Question

我想創建一個 textarea 擴展或收縮以適應瀏覽器窗口大小調整的內容。 所以當瀏覽器窗口寬度增加時，textarea的高度應該減小，使其與內容一樣高； 當瀏覽器窗口寬度減小時，textarea 的高度應增加以顯示所有內容。 這是我現在所擁有的，參考隨內容輸入擴展的文本區域：

var tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  window.addEventListener("resize", autoResize(tx[i]));
}

function autoResize(el) {
  el.style.height = "auto";
  el.style.height = (this.scrollHeight) + "px";
}

我如何讓這個工作？
*編輯：澄清我所說的自動調整大小的意思

Answer 1

如果您希望文本區域根據瀏覽器窗口擴展，您可以使用視口單位。

Vh 代表視口高度的 1%，vw 代表視口寬度的 1%。

100vh //100% of the viewport height
100vw //100% of the viewport width