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的高度并将其应用于left div吗？

Answer 1

您可以通过在HTML中设置<div> s的表格式结构然后使用display: table，display: table-cell等来实现。这样做会因为同一行自动调整大小到与最高单元格相同的高度。但是，IE7及以下do not support display: 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; }

我必须从float: left和float: right中移除#left和#right才能使表格单元格显示正常工作，因为表格单元格无法浮动。然而，这已经把两个div放在了一起。表格单元格不接受边距，只接受填充。如果您不希望填充将它们分开，则可能需要display: table-cell和left之间的额外right div来分隔它们。

详细了解display: table和家人on QuirksMode以及on MDN。

Answer 2

这是我知道怎么做的方式。位置绝对位置和顶部/底部/左侧更新了您的小提琴：http://jsfiddle.net/8dstK/3/

基本上，您将包装div位置设置为相对，以便子div可以绝对定位在包装器中。接下来，我们将left 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;
    }

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

5 个答案: