Set input height 100% of parent

You cannot set height:100%; on an element if the parent hasn't a set height.

Just set td { height: 30px; } and it should work.

Actually, my last link was not working. After a few researches, it seems that you cannot achieve what you want without some JavaScript. But as you said, you tried to use JavaScript, so I assume this should be what you're looking for : Answer to the same kind of question (Have a look at its fiddle.) Seemingly, you won't have the choice.


You can set position:absolute to the input.

Here a Fiddle example (note that you must also set a width for the <td> that contains the input):

input{
    position:absolute;
    top:0px;
    height:100%;
}
td{
    position:relative;
    width:200px;
}

It works also with <input type="submit"> and <div>.

Tested on Firefox, Chrome and Edge, For Explorer, you should set a min-height to the input to make it at least usable.

UPDATE: For Dracco, here a Fiddle implementing your example.


Somehow setting table height to 100% works.

table {
  height: 100%;
}

input {
  height: 100%;
}
<table>
  <tr>
    <td> 1<br> 1 </td>
    <td> <input> </td>
  </tr>
</table>