当我调整浏览器 window 大小时，如何使文本区域正确调整大小？

Question

我想要一个文本区域来填满我的大部分屏幕。我希望它在浏览器 window 调整大小时正确调整大小。所以我做了以下 css：

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

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

但是当我调整浏览器大小时 window 正确的大小工作正常，但文本区域的底部不符合我的 95% 规则。它缩小直到底部通过 window 底部。

经过研究我想到了另一个解决方案：

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

现在底部表现正常，但正确的尺寸与之前解决方案中底部的问题相同。

如何使文本框在浏览器上正确调整大小 window 调整大小？

请注意，我对手动调整 textarea 元素的大小不感兴趣（注意 resize: none 规则）。我希望它在浏览器 window 调整大小时调整大小。另一件事是我不关心 textarea 中文本的大小。我应该独立于文本调整大小。

我在这个 jsfiddle 中创建了一个示例：

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

感谢任何帮助。谢谢

Answer 1

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

当我调整浏览器 window 大小时，如何使文本区域正确调整大小？

How do I make a textarea resize properly when I resize browser window?

html

css

resize