Question

我有什么textarea填充我的大部分屏幕。我希望它在浏览器窗口调整大小时正确调整大小。所以我做了以下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/

任何帮助表示赞赏。感谢

Answer 1

Updated jsFiddle

＆＃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;
}

＆＃13;

<textarea></textarea>

＆＃13;

当我调整浏览器窗口大小时，如何使textarea正确调整大小？

1 个答案: