html - 将输入高度设置为父级的 100%

Question

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

Answer 1

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

只需设置td { height: 30px; }，它应该可以工作。

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

Answer 2

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

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

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

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

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

更新：对于 Dracco，这里是一个 Fiddle 实现你的例子。

Answer 3

不知何故将表格高度设置为 100% 有效。

table {
  height: 100%;
}

input {
  height: 100%;
}

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