如何让textarea元素占满浏览器窗口100%的宽度和高度？

哎这个问题我太熟了！你写的那段代码之所以会让textarea超出窗口出现滚动条，根本原因是浏览器默认的盒模型在搞事情，还有一些隐性的样式影响。咱们一步步来搞定它：

1. 先统一盒模型 #

浏览器默认的box-sizing: content-box会让元素的宽高只计算内容区域，哪怕你设了border:0和padding:0，有时候还是会因为某些隐性样式（比如浏览器的默认outline）撑大元素。所以第一步给所有元素设置border-box盒模型，让宽高包含padding和border：

* {
  box-sizing: border-box;
}

2. 给html和body做全屏基础 #

要让textarea能撑满整个窗口，首先得让html和body本身占据全屏空间，同时清除它们的默认边距，还要防止body出现不必要的滚动条：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 彻底干掉body层面的滚动条 */
}

3. 配置textarea的全屏样式 #

最后给textarea设置宽高100%，清除所有默认的边框、边距，还可以按需去掉resize功能（避免用户拖动后超出窗口）：

textarea {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px; /* 如果你需要内边距的话，border-box会把它算在宽高里，不会超出 */
  border: none;
  resize: none; /* 禁止用户调整大小，不需要的话可以删掉 */
  outline: none; /* 去掉聚焦时的默认外框，可选 */
}

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      box-sizing: border-box;
    }
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    textarea {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 8px;
      border: none;
      resize: none;
      outline: none;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <textarea>Text goes here</textarea>
</body>
</html>

小补充 #

• 如果想保留用户调整textarea大小的功能，删掉resize: none就行，但要注意用户拖动后可能会超出窗口范围。
• 有些浏览器会默认给textarea显示垂直滚动条，哪怕内容没超出，你可以把textarea的overflow设为auto，这样只有内容过多时才会出现滚动条。

内容的提问来源于stack exchange，提问作者Ian Boyd