使用无脚本将 <div> 充满 <td>。

Question

是的，这是关于在中使用div的又一个问题，但不需要脚本。 td的宽度以像素为单位定义。

我希望div（及其内部输入）填充整个td。我已经在Chrome中使其工作，但在Firefox和IE9中失败了。那里一团糟。（我不关心IE6-8）

这是我正在测试的片段：http://jsfiddle.net/K5D9z/37/。 是否有通用解决方案？ 编辑

尽管我之前没有指定，但我希望某些表单元格的内容增长并扩展一些行。 在IE和FF中，height：100％表示元素将始终具有在CSS中指定的容器的初始高度：http://jsfiddle.net/K5D9z/51/。 所有答案都存在此问题。 更新

如评论中所指出，似乎没有纯CSS解决方案。 因此，我采用了脚本，在每个td上根据其计算高度设置style属性的高度：http://jsfiddle.net/K5D9z/54/。

- rgripper

---

删除 input 的定位属性 (position, top 等)，并将其高度设置为 100%，宽度设置为 auto，在 Firefox 17.0.1 上对我有效。 （我没有检查其他浏览器。） - ruakh

很遗憾，您无法使子元素填充父元素的高度达到100%。 - David Nguyen

看一下这个：https://dev59.com/G3NA5IYBdhLWcg3wBpBm - David Nguyen

我看过这个，但那个答案只是让所有列看起来都是100%高度。但是当涉及到内容容器的实际边框时，它们仍然只有与其内容一样高。因此，它无法帮助“input”标记完全填充其容器。 - rgripper

Answer 1

这样怎么样：

CSS：

table
{
    border-collapse:collapse;
}

td
{
    padding:0;
    border: 1px Solid gray;
    height: 120px;
    width: 100px;
}

.test-row 
{
    background-color: red;
}

.test-cell div, .test-cell input
{
    height:100%;
    width:auto;
    background-color: green;
}

演示：http://jsfiddle.net/K5D9z/47/

- Dom

---

如果第一列的内容高度大于td的高度，则FF和IE9-10中又出现了问题。整行会增长，但div仍然保持在CSS中定义的原始高度。 - rgripper

抱歉，我修改了我的初始帖子。 - Dom

Answer 2

您需要从.test-cell div, .test-cell input中删除position:absolute。这会导致input被从正常内容流中移除，因此它不会保留在其应该在的td中。通过将height和width从auto更改为100％，这与之前提到的一起，应该能够解决您所寻找的问题。

.test-cell div, .test-cell input{
  display: block;
  /* position: absolute; Don't use this style */
  height:100%;
  width: 100%;
  /* Don't need these, because it goes along with position absolute
     top:0;
     left:0;
     bottom:0;
     right:0;
  */
  background-color: green;
}

小提琴

- Cody Guldner

---

我在编辑问题时扩展了情况。如果我添加更多内容，您的解决方案在IE（至少在IE10中）无法正常工作：http://jsfiddle.net/K5D9z/51/。 - rgripper

@rgripper，你希望最终结果看起来像什么？ - Cody Guldner

就像在Chrome中一样-两个输入字段根据它们的行增长。 - rgripper

有点奇怪，在IE中似乎管用 :) 。得检查一下FF，如果没问题，我会标记你的答案。 - rgripper