html - How to set textarea to 100% width and height?

Question

How can i set a <textarea> to consume 100% width and height of the browser window?

For example, the following does not work:

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

<textarea>Text goes here</textarea>

jsFiddle

Because it consumes slightly over 100% of the window, causing a scrollbar to appear:

How do i make a <textarea> consume 100% of the space?

Bonus Reading

• 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

标签： htmlcsstextarea

Answer 1

问题是由于垂直对齐导致的/元素的常见空白问题。如果你检查谷歌的开发工具，你会看到：inline-blockinline

因此，要修复它，您只需调整垂直对齐或使 textarea 成为块元素（如其他答案中提供的那样）：

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

<textarea>Text goes here</textarea>