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

Answer 1

The issue is the common white space issue of inline-block/inline element due to vertical alignment. If you check dev tools of google you will see this:

So to fix it you simply need to adjust vertical alignment or make the textarea a block element (like provided in the other answers):

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

<textarea>Text goes here</textarea>

Answer 2

This will work. or just add display:block to textarea in your fiddle.

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

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

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