Html 制造<；部门>；填充<；td>；没有脚本

是的，这是一个关于好的

div

内部

td

但没有脚本的问题

td

的宽度以像素为单位定义

我想要一个

div

（及其内部输入）填充整个

td

。我让它在Chrome上工作，但在Firefox和IE9上失败了。那里一团糟。（我不在乎IE6-8）

以下是我正在测试的代码片段：。 有没有通用的解决方案

编辑

虽然我之前没有指定，但我希望某些表格单元格的内容会增加高度并扩展某些行。在IE和FF

height:100%

中，表示元素将始终在css中指定容器的初始高度。所有答案都有这个问题

更新

---

正如在评论中所指出的，似乎没有纯粹的css解决方案。因此，我根据每个

td

的计算高度，在

style

属性中使用脚本设置高度：。

类似这样的情况如何：

CSS:

​

---

演示：

您需要从

.test cell div、.test cell input

中删除

位置：绝对值。这导致
输入
从正常的内容流中删除，因此它不会保留在
td
中。这与将
高度
和
宽度
从
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;
}

在Firefox 17.0.1上，放下
输入
的定位内容（
位置
，
顶部
，等等），并将其高度设置为
100%
和宽度设置为
自动
，似乎对我很有效。（我没有检查其他浏览器。）很遗憾，您无法使子元素填充父元素100%的高度。请看这个：我看到了这个，但答案是使所有列看起来都是100%高度。但是，当涉及到内容容器的实际边界时，它们仍然与内容一样高。因此，它不能帮助
输入
标记完全填充其容器。如果第一列中的内容高度大于td的高度，FF和IE9-10中再次出现问题。整行变大了，但div仍保持css中定义的原始高度。很抱歉，我更改了我的初始帖子。我在对问题的编辑中扩展了案例。如果我添加更多内容，您的解决方案在IE中（至少在IE10中）不起作用：。@rgripper您希望最终结果与Chrome中的结果类似-两个输入字段都会按行增长。奇怪，但在IE中它似乎起到了作用：）。我要检查FF，如果可以的话，我会记下你的答案。
.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;
}