Html 将输入高度设置为父级的 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16933590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set input height 100% of parent
提问by Dracco
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.htmlIt would be greatly appreciated if anybody knows any solution/hack.
我在设置输入（输入文本）高度以适合 100% 的父母 ( td) 高度时遇到了一些问题。我什至尝试遍历每个输入并使用 jQuery 手动设置它的高度，但这需要很多时间（我正在处理的站点有很多单元格）并且仍然无法在 IE 7 和 8 上工作（我有使网站也能在这些下工作）。这是一个示例：http: //st8.eu/test.html如果有人知道任何解决方案/hack，将不胜感激。
采纳答案by Jerska
You cannot set height:100%;on an element if the parent hasn't a set height.
height:100%;如果父元素没有设置高度，则不能在元素上设置。
Just set td { height: 30px; }and it should work.
只需设置td { height: 30px; }，它应该可以工作。
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.
实际上，我的最后一个链接不起作用。经过一些研究，似乎没有一些 JavaScript 就无法实现你想要的。但是正如您所说，您尝试使用 JavaScript，所以我认为这应该是您正在寻找的内容：回答同一类型的问题（看看它的小提琴。） 表面上，您没有选择。
回答by T30
You can set position:absoluteto the input.
您可以设置position:absolute为输入。
Herea Fiddle example (note that you must also set a width for the <td>that contains the input):
这是一个 Fiddle 示例（请注意，您还必须为<td>包含输入的设置宽度）：
input{
position:absolute;
top:0px;
height:100%;
}
td{
position:relative;
width:200px;
}
It works also with <input type="submit">and <div>.
它也适用于<input type="submit">和<div>。
Tested on Firefox, Chrome and Edge, For Explorer, you should set a min-height to the input to make it at least usable.
在 Firefox、Chrome 和 Edge 上进行了测试，对于资源管理器，您应该为输入设置最小高度以使其至少可用。
UPDATE: For Dracco, herea Fiddle implementing your example.
更新：对于 Dracco，这里有一个 Fiddle 实现你的例子。
回答by Dimitrius
Somehow setting table height to 100% works.
以某种方式将表格高度设置为 100% 有效。
table {
height: 100%;
}
input {
height: 100%;
}<table>
<tr>
<td> 1<br> 1 </td>
<td> <input> </td>
</tr>
</table>