使 <div> 填充 <td> 而不使用脚本答案

【问题标题】：make <div> fill <td> without scripts使 <div> 填充 <td> 而不使用脚本
【发布时间】：2012-12-25 21:05:54
【问题描述】：

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

td 的宽度以像素为单位。

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

这是我正在测试的 sn-p：http://jsfiddle.net/K5D9z/37/。有没有通用的解决方案？

编辑

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

更新

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

【问题讨论】：

删除input 的定位内容（position、top 等），并将其高度设置为100%，宽度设置为auto，似乎可行在 Firefox 17.0.1 上对我来说。（我没有检查其他浏览器。）
不幸的是，您不能让子元素填充父元素的 100% 的高度。
看看这个：stackoverflow.com/questions/1122381/…
我见过这个，但答案是让它看起来就像所有的列都是 100% 高度。但是当涉及到内容容器的实际边界时，它们仍然只和内容一样高。所以它不会帮助 input 标记完全填充它的容器。

标签： html css firefox internet-explorer-9

【解决方案1】：

您需要从.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;
}

Fiddle

【讨论】：

我在对问题的编辑中扩展了案例。如果我添加更多内容，您的解决方案在 IE 中不起作用（至少在 IE10 中）：jsfiddle.net/K5D9z/51.
@rgripper 你希望最终结果是什么样子
就像在 Chrome 中一样 - 两个输入字段都根据它们的行增长。
奇怪，但在 IE 中似乎可以解决问题:)。一定要检查FF，如果没问题，我会标记你的答案。

【解决方案2】：

这样的事情怎么样：

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/

【讨论】：

如果第一列内容的高度大于td的高度，FF和IE9-10又会出问题。整行增长，但 div 保持在 css 中定义的原始高度。
抱歉，对我最初的帖子进行了更改。