調整瀏覽器窗口大小時，如何正確調整textarea的大小？

Question

我要擁有一個充滿屏幕大部分內容的文本區域。 當瀏覽器窗口調整大小時，我希望它能正確調整大小。 所以我做了以下CSS：

html, body {
  height: 95%;
  width: 98%;
  margin: 10px;
}

textarea {
  width: 95%;
  height: 95%;
  margin: auto;
  resize: none;
}

但是，當我調整瀏覽器窗口的大小時，正確的大小可以正常工作，但是textarea的底部不會遵循我的95％規則。 收縮直到底部通過窗口底部。

經研究，我想出了另一種解決方案：

textarea {
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: 95%;
    resize: none;
} 

現在，底部的行為還可以，但是正確的尺寸與底部的解決方案存在相同的問題。

如何在瀏覽器窗口調整大小時正確調整文本框的大小？

請注意，我對手動調整textarea元素的resize: none不感興趣（請注意resize: none規則）。 當瀏覽器窗口調整大小時，我希望它調整大小。 另一件事是，我不在乎textarea中文本的大小。 我應該獨立於文本調整大小。

我在此jsfiddle中創建了一個示例：

https://jsfiddle.net/1akykrg2/13/

任何幫助表示贊賞。 謝謝

Answer 1

更新了jsFiddle

 *{ box-sizing:border-box; /* easier box-model calculations */ -webkit-box-sizing: border-box; } html, body { height: 100%; margin:0; } textarea { position: fixed; left:10px; top:10px; width: calc(100vw - 20px); /* calc and viewport to the rescue */ height: calc(100vh - 20px); resize: none; } 

 <textarea></textarea>