如何将textarea设置为100％的宽度和高度？

Question

如何设置<textarea>以消耗浏览器窗口的100％宽度和高度？

例如，以下内容不起作用：

html, body, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

<textarea>Text goes here</textarea>

jsFiddle

因为它占据窗口的100％以上，导致滚动条出现：

如何让<textarea>消耗100％的空间？

奖金阅读

• How to set width and height of textarea
• How to set a Textarea to 100% height in Bootstrap 3?
• I want to set the height of a TextArea to 100% of a Table Cell in XHTML 1.0 Transitional
• I have a textarea that won't have 100% in width when I set it in CSS or plain HTML?
• How can I make a TextArea 100% width without overflowing when padding is present in CSS?
• Textarea to fill a parent container exactly, with padding
• How to have a textarea at 100% width and keep its margin?
• 100% textarea problem

Answer 1

由于垂直对齐，问题是inline-block / inline元素的common white space issue。如果你检查谷歌的开发工具，你会看到：

所以要修复它你只需要调整垂直对齐或使textarea成为一个块元素（如其他答案中提供的那样）：

html, body, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
textarea {
 vertical-align:top;
}

<textarea>Text goes here</textarea>

Answer 2

这会奏效。或者只需将display:block添加到fiddle中的textarea。

html, body {
  margin: 0;
  padding: 0;
  border: 0;
}
* {
box-sizing: border-box;
}

textarea {
  width: 100%;
  height: 100vh;
  display: block;
 }

<textarea placeholder="message"></textarea>

Answer 3

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  display:block;
  resize:none;/*Add this if you dont want users to resize */
}

<textarea>Text goes here</textarea>

Answer 4

只需删除html和body标签的宽度和高度。

稍后谢谢