Set input height 100% of parent

Question

I have a little problem with setting input (type text) height to fit 100% of parents (td) height. I even tried to iterate through every input and set it height manually with jQuery, but it takes quite a lot of time (site I am working on has a lot of cells) and still doesn't work on IE 7 and 8 (I have to make site work under those too). Here is a sample: http://st8.eu/test.html It would be greatly appreciated if anybody knows any solution/hack.

Solution 1

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.

Solution 2

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.

Solution 3

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>