html - Css高度问题

Question

我遇到了一些问题，或者可能是我不知道该怎么做:

我现在拥有的

我有一个 Main Div，在这个 div 下我有两个 div。一个是蓝色，另一个是灰色。 Main Div 有 min-height 和 Gray div 有很多 Content in it 。 Blue Content 内容较少。

我想要什么

如果 Gray div 高度增加，Blue Div 高度也随之增加，这是否可能。意味着两个高度将相同。

Live Js fiddle 演示:http://jsfiddle.net/saifrahu28/y6uRx/1/

HTML

<div style="width:200px; min-height:100px; background:#ccc;">
<div class="Gray">
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>
    this is Gray <br/>

</div> 

<div class="Blue">
    this is Blue <br/>
</div> 

CSS

.Gray{
width:100px; min-height:200px; background:#333; float:left;
 }

.Blue{
width:50px;  background:#3b3ff5; float:left;
}

Answer 1

一个简单的方法是将 overflow: hidden 放在整个容器上(在你的 fiddle 中是浅灰色)，然后用 边距底部:-99999px； padding-bottom: 99999px; 并让非固定大小的框(灰色)确定实际大小。

请参阅此 fiddle :http://jsfiddle.net/y6uRx/9/

这适用于所有浏览器(包括旧版 IE)。

在这篇文章中有很多关于做你想做的事的方法的更多信息:Fluid Width Equal Height Columns

如果您可以更改您的代码以使用此处列出的“更清洁”代码之一，那就去做吧。