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

Question

http://jsfiddle.net/eDYDD/

上面看到的是一个 jsfiddle，主要解释了我想要做什么。我似乎无法#main_info填充 100% 的高度#main，所以边框将填充 100% 的 div，你知道，看起来不错。任何帮助，将不胜感激。

Answer 1

在 CSS 中，除非父级具有固定高度，否则您不能让子级填充 100% 的高度，而不需要一些技巧。

1. 您可以使用 display table 使元素表现得像表格，确保子元素填写父元素。
2. 您可以使用背景图像，使您的案例中的border-right 由父元素直观地管理。
3. 您可以使用 JavaScript 来维护这两个元素的外观。

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

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

Answer 2

使用绝对定位。

#main {
    position: relative;
}
#main_info {
height: 100%;
    position: absolute;
}

http://jsfiddle.net/eDYDD/3/

Answer 3

看看使用跨浏览器 CSS 的等高列：

使用 CSS 创建等高的列并不像最初看起来那么容易。本教程重点介绍了多列布局出现的显示问题，然后展示了一个适用于所有常见 Web 浏览器的简单解决方案。此处显示的方法 100% 无 CSS hack、无图像和无 JavaScript，因此它甚至可以在最严格编码的网站上使用。

Answer 4

我修改了你的jsfiddle。其他答案错过了最简单的解决方案，即继承min-height父元素的属性：

#main_info {
    width: 20%;
    min-height: inherit;
    border-right: 1px solid #E4E4E4;
}