Textarea 100% height inside td by css

Question

I want this textarea to be fit inside the table row, by its height & width, so I have used height: 100%; width 100%; on textarea and my decided height width on td. Now textarea's width is ok, but height is not 100%, I am working hard with bellow code ~

Check Image

<style>
body {text-align:center;font-family:Arial;font-weight:400;font-size: 16px;}
table {width:100%;text-align:center;border-collapse: separate;border-spacing: 15px 5px;}
td{padding:20px; box-shadow: 0px 0px 20px #e7e7e7; background-color: #fff;}
textarea{
width:100%;
height:100%;
 resize: none;
}
</style>

<table>
   <tr>
      <td rowspan='2' style='height: 78vh;width: 30%; line-height: 28px;'>   Layout - 1
      </td>
      <td rowspan='2' style='width: 40%;'>
         Layout - 2
      </td>
      <td height='42%' style='width: 30%;'>
         <textarea style='height:100% width:100%'></textarea>
      </td>
   </tr>
   <tr>
      <td height='42%'>
          <textarea style='height:100% width:100%'></textarea>
      </td>
   </tr>
</table>

But not working, help! How to make 100% height of textarea inside a td? Please do not suggest rows="--" attribute.

Madi

Answer 1

There is a simple and sweet trick. Set textarea position as absolute while top and left are 0, then set td position as relative. That's all.

In this case you are not enforced to set a certain height in px for td or textarea.

body {text-align:center;font-family:Arial;font-weight:400;font-size: 16px;}
table {width:100%;text-align:center;border-collapse: separate;border-spacing: 15px 5px;}
td{
  padding:20px;
  box-shadow: 0px 0px 20px #e7e7e7;
  background-color: #fff;
  position: relative
}
textarea{
  width:100%;
  height:100%;
  resize: none;
  position: absolute;
  top: 0;
  left:0;
}

<table>
   <tr>
      <td rowspan='2' style='height: 78vh;width: 30%; line-height: 28px;'>   Layout - 1
      </td>
      <td rowspan='2' style='width: 40%;'>
         Layout - 2
      </td>
      <td height='42%' style='width: 30%;'>
         <textarea></textarea>
      </td>
   </tr>
   <tr>
      <td height='42%'>
          <textarea></textarea>
      </td>
   </tr>
</table>

Slippy

Answer 2

You could do box-sizing: border-box; in CSS to make sure that it counts the entire textarea with its content, padding, and border, as part of its width and height. Also make sure to change the rows and cols attribute of the actual textarea to make sure that it becomes bigger.

Ziwot

Oh sorry I forgot you also have to change the rows and cols attribute of the textarea to change the number of rows and columns it has because otherwise it is automatically going to be 1 row and column which makes it small. – Ziwot

Answer 3

Here's something:

td textarea 
{
    width: 100%;
    height: 100%
}

<table border="1">
   <tr>
      <td rowspan='2'>   
        Layout - 1
      </td>
      <td rowspan='2'>
         Layout - 2
      </td>
      <td style="height:400px">
         <textarea></textarea>
      </td>
   </tr>
   <tr>
      <td style="height:100px">
          <textarea></textarea>
      </td>
   </tr>
</table>

I made the cells different heights on purpose so you can see that it is in fact stretching out to 100%.

Voiceless

You could use absolute measurements but if the users screen width and height are different then it wouldn't work. – Ziwot

@TimothyChen The absolute heights are not to keep. They are only there to demonstrate that the textarea takes up the full height and they should be removed. – Voiceless