Question 202852 in Html Question posted in
Some basic documentation can be found here.

Html – How to make textarea element cover the entire width and height of its parent container?

I have this HTML code:

<div style="border: 2px red solid; background: blue;">
    <textarea rows="6" style="width: 100%; height: 100%;"></textarea>
</div>

We can see the blue background of the parent container element around the edges of the textarea. Is there a way to full stretch the textarea to cover the entire parent it is in?

Tags:

2

Answers


  1. 0

    Two things:

    1. You don’t need to set height: 100%, since the rows attribute of your <textarea> element is setting the height (and the height of the parent <div>).
    2. See this question for a similar problem. The <textarea> element is rendered with display: inline-block; by default, so setting display: block; should the trick.
    <div style="border: 2px red solid; background: blue;">
    <textarea rows="6" style="width: 100%; display: block;"></textarea>
</div>
    Login or Signup to reply.
  2. 0 
    .container {
  width: 100%;
  height: 100px;
  position: relative;
}

textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
    <div class="container">
  <textarea></textarea>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search