html - 如何让一个div填充另一个div的100%高度

Question

http://jsfiddle.net/eDYDD/

上面是一个 jsfiddle，它主要解释了我正在尝试做的事情。我似乎无法让 #main_info 填充 #main 的 100% 高度，因此边框将填充 100% 的 div，你知道，看起来不错.任何帮助将不胜感激。

Answer 1

在 CSS 中，除非 parent 有固定的高度，否则你不能让 child 填充 100% 的高度，除非有一些技巧。

1. 您可以使用显示表格使元素表现得像表格，确保子项填写父项。
2. 您可以做到这一点，因此在您的案例中，border-right 由父元素使用背景图像在视觉上进行管理。
3. 您可以使用 JavaScript 来维护这两个元素的外观。

其中哪一项适用于您实际上取决于您的用例。由于此时您的头像信息只是右边框，因此在 #main_info 上创建视觉边框可能是最简单的方法。

使用基于表格的布局也可以很好地解决这个问题，但是需要额外的标记来确保您有一个 table 元素、一个 row 元素和一个 单元格 元素。