如何让 div 的高度与父级 td 的高度相等（仅使用 CSS）？

Question

http://jsfiddle.net/zVscL/

听起来很愚蠢，但有没有办法做到这一点呢？我一直在使用height:100％，但得到的高度是0px。

我已经阅读了要求从父级传递显式的height值才能使其工作的要求。问题是我不能随意加入28px或任何魔术数字，因为父级的高度由内容（即它将变化）决定。我的选择是什么？

编辑：请记住，这只是我问题的简化示例。是的，我需要使用表格。无法说服上层。 （幸运的是，它只用于显示数据，而不是页面布局！）

- meiryo

---

我非常确定你不能使用表格来完成它。 - grigno

很不幸，这个表格是必须保留的，我没有做决定的权力 :/ - meiryo

Answer 1

您可以尝试使用overflow: auto，这是一个可工作的例子。

- Aioros

---

谢谢，使用overflow是使子元素高度100％的父元素的万能解决方案吗？ - meiryo

这在Opera中不起作用。你只能看到从边框顶部的蓝色条。 - cimmanon

不，其实并不是。正如cimmanon所指出的那样，这并不是一种可靠的方法，但在许多情况下它可以解决这个问题。无论如何，这里的重点是height: 100%只有在父元素有定义的高度时才有效，而你不能这样做。我能想到的唯一的其他选择是将你的div设置为position: absolute; height: 100%;，td设置为position: relative(或absolute)。如果这不会影响到布局中的其他内容，那么它应该可以解决问题。 - Aioros

CSS为什么不能做这样一个简单的事情而不需要使用hack呢？我从你的fiddle中fork了一份，但是我无法使文本垂直对齐！http://jsfiddle.net/u3X3S/ - meiryo

显然，overflow设置搞砸了它。也许你应该尝试另一种方式：你真的需要一个浮动的div吗？换成另一个td怎么样？ - Aioros

在Chrome中，overflow: auto; 和 height:100% 可以一起使用。但我在FF和IE中尝试同样的代码时，它们似乎没有任何效果。我有一个<div>元素位于<td>元素内，我想让<div>元素的高度与<td>元素相同。我找不到解决方法，尝试了很多东西。 - atsurti