0

我有一些问题，或者我可能不知道如何做到这一点：

我现在拥有的

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

我想要的是

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

现场 Js 小提琴演示：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;
}
4

5 回答 5

4

一个简单的方法是放在overflow: hidden整个容器上（你的小提琴中的浅灰色），然后强制蓝色盒子在底部有一个假填充，margin-bottom: -99999px; padding-bottom: 99999px;让非固定大小的盒子（灰色）确定实际尺寸。

看到这个小提琴：http: //jsfiddle.net/y6uRx/9/

这适用于所有浏览器（包括旧版 IE）。

更多关于本文中您想要的几种方法的信息：流体宽度等高列

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

于 2013-06-28T17:55:24.980 回答
2

http://css-tricks.com/fluid-width-equal-height-columns/

这为您提供了几种不同的方法。去看看有没有适合你的。

于 2013-06-28T17:57:35.347 回答
1

您可以使用 CSS 表格，但是您需要min-height在主 div 上强制执行您的最大功能。

CSS

#main {
    display: table;
    width: 200px;
    min-height: 100px;
    background:#ccc; 
}

.Gray {
    width:100px;
    min-height:200px; /* this won't work here */
    background:#333;
    display: table-cell;
}

.Blue {
    width:50px;
    background:#3b3ff5; 
    display: table-cell;
}

HTML

<div id="main">
    <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> 
   
</div>

见http://jsfiddle.net/XzU7r/1/

于 2013-06-28T17:52:04.043 回答
0

尝试使用 display:table; 和高度：100%；在两个 div 上。

于 2013-06-28T17:56:21.687 回答
0

如果我正确理解了您的问题，那么它可能会解决您的问题

.Gray{
    width:100px; background:#333; float:left;
}

.Blue{
    width:50px;  background:#3b3ff5; float:left;
}
.Gray, .Blue {
     min-height: 150px;   
}
于 2013-06-28T18:39:57.280 回答