javascript - 使用css填充高度

Question

这是一个古老的问题，尽管我无法找到适合我的解决方案。

给定表格单元格 (TD) 内的 DIV，我想填充 DIV 的高度以适合 TD

+-----------+
|     TD    |
|+---------+|
||   DIV   ||
|+---------+|
|           |
+-----------+

唯一的陷阱是:

• 我不想设置父 TD 的高度
• 我想避免使用 Javascript(更喜欢纯 CSS 解决方案)
• 保持内容可编辑 DIV 的可调整大小性质
• 奖励:让它在 IE8+ 中运行(跨浏览器解决方案)
• 奖励:使用display:flex； - 我无法解决这个问题，但看起来应该可以解决问题。

要求太多？

示例:

获取“foo”DIV，以填充其父 TD 的 100% 高度。我得到了一些接近工作的东西，但是在 DIV 元素上进行填充会抛出边框(使用 Opera)。

/* My Attempt: close, but the padding throws out the borders */
div{
    display:inline-block;
    height:100%;
    width:100%;
}

http://jsfiddle.net/nickg1/g5cpQ/5/

谢谢!

Answer 1

是的，根据您的条款和条件，display:table 是最适合您的解决方案。

像这样添加CSS:

div{
display:table;
height: 100%;
border:1px solid red;    
}

检查以下链接

LIVE DEMO