将输入框的高度设置为父元素的100%。

Question

我有一个小问题，无法将输入框（类型为文本）的高度设置为父元素（td）高度的100％。我甚至尝试使用jQuery逐个迭代并手动设置输入框的高度，但这需要相当长的时间（我正在处理的网站有很多单元格），而且在IE 7和8上仍然无法正常工作（我也必须使该网站能够在这些浏览器中正常工作）。这是一个示例：http://st8.eu/test.html 如果有人知道任何解决方案/技巧，那将不胜感激。

- Dracco

Answer 1

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

只需设置td { height: 30px; }即可解决问题。

实际上，我的最后一个链接不起作用。经过一些研究，似乎你无法在没有一些JavaScript的情况下实现你想要的效果。但是正如你所说，你试图使用JavaScript，所以我想这应该是你要找的：相同问题的答案（看看它的fiddle.） 看起来你别无选择。

- Jerska

---

无法做到，因为在我的情况下不同的TR具有不同的高度。 我确实理解百分比需要父元素的固定大小，但一定有一个解决方法。 - Dracco

再次编辑，希望它能满足您的需求，似乎没有其他方法可以实现您想要的。 - Jerska

好的，我已经设置了所有TD的固定高度，看起来不如应该的那样好，但是嘛，有限制 :/。谢谢回答=)。 - Dracco

只有一件事，如果你真的需要那样的输出，为什么不用 div 重新创建你的表格呢？ - Jerska

很抱歉听到这个。祝你好运。但是，老实说，在JS中检查700个单元格不应该太长时间，我以为你在谈论数千行。 - Jerska

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上测试，对于Explorer，您应该为输入设置最小高度，以使其至少可用。

更新：针对Dracco，这里是一个实现您示例的代码片段。

- T30

---

首先，这是两年前的问题...其次，它已经解决了。硬编码TD高度是一种方法，但不是通用的。至于绝对定位：1.仅当表格实际上是页面上唯一的元素，或者其余部分也被绝对定位时（否则它将破坏整个页面的布局），才会有效地定位表格。2.将输入位置设置为绝对位置意味着我必须将TD设置为至少相对位置，并且除此之外，它对高度没有任何影响。3.你有考虑过我在问题中提到的IE吗？ - Dracco

如果我有另一种解决方案并且认为它有帮助，我会发布它的，不管问题的年龄（或状态）如何。 1- 绝对定位不是问题，例如，您可以在相同大小的相对<div>中放置表格（它是js中的一行代码）。 2- 我已将我的fiddle设置为<td>定位为relative，谢谢提示。 3- 我已经测试过并更新了我的答案。 - T30

请具体说明。 - T30

我特别说明它不适用于多行。在您最近的更改之后，它仍然无法在Internet Explorer上工作，输入框的高度为0。 - Dracco

很抱歉再次写无用的评论，但是如果您查看第3个编辑（昨天我的第一个编辑），fiddle是http://jsfiddle.net/33eff9eg/1/，它可以工作！:P - T30

Answer 3

一些情况下，将表格高度设置为100％有效。

table {
  height: 100%;
}

input {
  height: 100%;
}

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

- Dimitrius