将输入高度设置为父级的 100%答案

【问题标题】：Set input height 100% of parent将输入高度设置为父级的 100%
【发布时间】：2013-06-05 07:06:33
【问题描述】：

我在设置输入（输入文本）高度以适合 100% 的父母 (td) 高度时遇到了一点问题。我什至尝试遍历每个输入并使用 jQuery 手动设置它的高度，但这需要相当多的时间（我正在处理的站点有很多单元格）并且仍然无法在 IE 7 和 8 上运行（我有使网站也可以在这些条件下工作）。这是一个示例：http://st8.eu/test.html 如果有人知道任何解决方案/黑客，将不胜感激。

【问题讨论】：

标签： html css input html-table

【解决方案1】：

以某种方式将表格高度设置为 100% 有效。

table {
  height: 100%;
}

input {
  height: 100%;
}

<table>
  <tr>
    <td> 1<br> 1 </td>
    <td> <input> </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

如果父元素没有设置高度，则不能在元素上设置 height:100%;。

只需设置td { height: 30px; } 即可。

实际上，我的最后一个链接不起作用。经过一些研究，似乎没有一些 JavaScript 就无法实现您想要的。但是正如您所说，您尝试使用 JavaScript，所以我认为这应该是您正在寻找的内容：Answer to the same kind of question（看看它的小提琴。）看来，你别无选择。

【讨论】：

做不到，在我的情况下，不同的 TR 有不同的高度。我确实了解百分比需要父母的固定大小，但必须有解决方法。
又编辑了，希望能满足你想要的，好像没有什么别的可以达到你想要的了。
好的，所以我已经设置了所有 TD 的固定高度，看起来不像它应该的那么好，但是，限制：/。谢谢你的回答=）。
只有一件事，如果您真的需要这样的输出，为什么不使用 div 重新创建表格？
我正好有 699 个单元格，里面有输入，把它全部改成 div 真的很痛苦：P。除了我只是一个前端开发人员之外，其他人负责后端:)。

【解决方案3】：

您可以将position:absolute 设置为输入。

Here 一个 Fiddle 示例（请注意，您还必须为包含输入的 <td> 设置宽度）：

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

它也适用于 <input type="submit"> 和 <div>。

在 Firefox、Chrome 和 Edge 上测试，对于资源管理器，您应该为输入设置一个最小高度以使其至少可用。

更新：对于 Dracco，here 一个小提琴实现你的例子。

【讨论】：

首先，这是2岁的问题......其次，它已经解决了。对 TD 高度进行硬编码是一种可行的方法，尽管它不是通用的。至于绝对位置： 1. 绝对定位表只有当它实际上是页面上唯一的元素时才有效，或者其余元素也绝对定位（否则会弄乱整个页面的布局。 2. 设置位置输入为绝对意味着我必须将 TD 设置为至少是相对的，除此之外，它不会改变高度。3. 你是否考虑过我提到的 IE？
如果我有替代解决方案并且我认为它可能会有所帮助，我会发布它，无论问题的年龄（或状态）如何。 1- 绝对定位不是问题，比如你可以把表格放在一个相同大小的相对
中（在js中是一行）。 2-我已经更新了我的小提琴设置定位到相对，感谢提示。 3- 我已经对其进行了测试并更新了我的答案。
请说得更具体一些。
我特别说它不适用于多行。在您最近更改之后，它仍然无法在 Internet Explorer 上运行，输入的高度为 0。
我昨天链接的 Fiddle 已经是多行的并且可以正常工作，但是还可以......对于 Explorer 阅读我的答案，我已经给出了一种解决方法，使其（至少）可用。