如何获得一个div填补另一个DIV

Question

http://jsfiddle.net/eDYDD/

上面看到100％的高度是的jsfiddle这主要是解释什么，我试图做的。我似乎无法让#main_info填充#main的100％高度，因此边框将填充div的100％，并且您知道，看起来不错。任何帮助，将不胜感激。

Answer 1

在CSS中，除非父母具有固定身高，否则无法让孩子填充其身高的100％，而不会产生任何欺骗。

1. 可以使用显示表使元素像表格一样工作，确保子级填充父级。
2. 你可以这样做，你的情况下，边界权利是由父元素使用背景图像进行可视化管理的。
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

在Equal Height Columns with Cross-Browser CSS看看：

创建等高列与CSS并不容易，因为它可能会开始看起来。本教程重点介绍了多列布局时出现的显示问题，然后展示了适用于所有常见Web浏览器的简单解决方案。这里显示的方法是100％CSS免费，无图像和无JavaScript，所以它甚至可以在严格编码的网站上使用。

Answer 4

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

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