html – 无需脚本即可填充

2023年3月13日 200次阅读

是的,这是一个关于td里面好老的div但没有脚本的问题.

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

我想要一个div(及其内部输入)填充整个td.我在Chrome中工作,但在Firefox和IE9中失败了.那里一团糟. (我不关心IE6-8)

以下是我正在测试的片段：http://jsfiddle.net/K5D9z/37/.
这是一个通用的解决方案吗？

编辑

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

UPDATE

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

最佳答案 您需要从.test-cell div,.test-cell输入中删除position：absolute.这导致输入从正常的内容流中移除,因此它不会保留在应该的td中.这一点,以及从自动变为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

点赞