将浮动 div 设置为高度：100%？

Question

我怀疑没有答案，但我想知道是否有办法将浮动 div 的高度设置为 100%？

我在一个包装 div 中有两个 div：

<div id="wrapper">
    <div id="left">
    </div>
    <div id="right">
    </div>
</div>

右边的 div 有一个设定的高度，我想让左边的 div 匹配它，所以我创建了：

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
}

#left{
    width: 90px;
    height: 100%;
    float:left;
    background-color: #ccc;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

但左边的 div 没有展开。在这里摆弄：http://jsfiddle.net/8dstK/2/

有人知道实现等高 div 的方法吗？

我应该只使用 JQuery 来获取右 div 的高度并将其应用于左 div 吗？

Answer 1

您可以通过在 HTML 中设置<div>s 的类似表格结构，然后使用display: table、display: table-cell 等来做到这一点。这将起作用，因为同一行中的表格单元格会自动调整为与最高的单元格相同的高度。不过IE7及以下do not supportdisplay: table。

jsFiddle

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</div>

#wrapper       { display: table; }
#inner-wrapper { display: table-row; }
#left          { display: table-cell; }
#right         { display: table-cell; }

我必须从 #left 和 #right 中删除 float: left 和 float: right 才能使表格单元格显示正常工作，因为表格单元格不能浮动。但是，这将两个 div 粘在一起。表格单元格不接受边距，只接受填充。如果您不想用填充分隔它们，您可能需要在 left 和 right 之间添加一个额外的 display: table-cell div 来分隔它们。

阅读更多关于display: table 和家人on QuirksMode 和on MDN 的信息。

Answer 2

这是我知道如何做到这一点的方式。具有绝对位置和上/下/左 更新了你的小提琴：http://jsfiddle.net/8dstK/3/

基本上，您使包装器 div 的位置相对，以便子 div 可以绝对定位在包装器内。接下来，我们将左侧 div 设置为绝对定位，并在我们的定位中考虑填充。将顶部设置为 5px，左侧设置为 5px，底部设置为 5px。应该这样做。

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
    position:relative;
}

#left{
    width: 90px;
    float:left;
    background-color: #ccc;
    top:5px;
    left:5px;
    bottom:5px;
    position:absolute;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

Answer 3

在父 div 中使用最常用的 clearfix 类。这个问题已经可用。检查此链接。 How do you keep parents of floated elements from collapsing?

Answer 4

有答案，有解决方案。 高度没有扩大是因为它是<div> 而<div> 是块级元素。

如果你想让它扩展，你必须将它的display 转换为table 才能扩展。

下面是相同的工作演示。

WORKING DEMO

HTML：

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

CSS：

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
    display:table;
}

#left{
    width: 90px;
    height: 100%;
    float:left;
    background-color: #ccc;
    display:table;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

Answer 5

将父元素设置为固定高度（比如300px），然后子元素会自动将100%上父元素的整个宽度设为http://jsfiddle.net/8dstK/6/

 #wrapper {
        background-color: red;
        width: 200px;
        height: 300px;
        overflow: auto;
        padding: 5px;
    }

    #left{
        width: 90px;
        height: 100%;
        float:left;
        background-color: #ccc;
    }

    #right{
        width: 90px;
        height: 100%;
        float:right;
        background-color: blue;
    }