9

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:

enter image description here

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

Bonus Reading

Improve this question
1
  • Would absolute positioning on the textarea work for you? textarea { position:absolute; } seems to do the trick Commented May 3, 2018 at 17:35

4 Answers 4

Reset to default
3

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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:

enter image description here

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>

Improve this answer

Comments

0 

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>

Improve this answer

Comments

-1

Just remove width and height for html and body tag.

Thank me later

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.