html - 如何将文本区域设置为 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

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

因此，要修复它，您只需调整垂直对齐方式或使文本区域成为 block 元素(如其他答案中提供的那样):

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

<textarea>Text goes here</textarea>