我要拥有一个充满屏幕大部分内容的文本区域。当浏览器窗口调整大小时，我希望它能正确调整大小。所以我做了以下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规则）。当浏览器窗口调整大小时，我希望它调整大小。另一件事是，我不在乎textarea内文本的大小。我应该独立于文本调整大小。
我在此jsfiddle中创建了一个示例：
https://jsfiddle.net/1akykrg2/13/
任何帮助表示赞赏。谢谢
*{
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句