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

Question

我希望拥有一个填满屏幕大部分空间的文本区域。当浏览器窗口大小改变时，它能够适当地调整大小。因此，我编写了以下CSS代码：

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

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

但是当我调整浏览器窗口大小时，右侧的大小可以正常工作，但文本区域底部的部分不会遵守我的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/

- Nelson Teixeira

---

你不能只使用Bootstrap吗？ - LatentDenis

我正在使用Bootstrap...但没有设置布局...我会尝试一下。 - Nelson Teixeira

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>

- Roko C. Buljan

---

我在自动更新版本的FireFox中没有看到文本区域占据窗口的高度。 - jack blank

@jackblank1 已编辑。（实际上在FF中确实存在问题） - Roko C. Buljan