Question

是的，这是另一个关于div内td好但没有脚本的问题。

td的宽度以像素为单位定义。

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

以下是我正在测试的代码段：http://jsfiddle.net/K5D9z/37/。有没有通用的解决方案呢？

修改

虽然我之前没有说明，但我希望某些表格单元格的内容在高度上增加并扩展一些行。在IE和FF中height: 100%表示元素将始终具有在css：http://jsfiddle.net/K5D9z/51/中指定的容器初始高度。所有的答案都有这个问题。

更新

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

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/

Answer 2

您需要从position:absolute中删除.test-cell div, .test-cell input。这导致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;
}

Fiddle

make <div> fill without without scripts </div>

2 个答案: