1

我怀疑对此没有答案，但我想知道是否有办法将浮动 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 吗？

4

5 回答 5

3

您可以通过在 HTML 中设置类似表格的<div>s 结构然后使用display: table,display: table-cell等来做到这一点。这将起作用，因为同一行中的表格单元格会自动调整到与最高单元格相同的高度。但是，IE7 及以下不支持 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。但是，这将两个 div 粘在一起。表格单元格不接受边距，只接受填充。如果你不想用填充分隔它们，你可能需要一个额外的div来分隔它们。float: right#left#rightdisplay: table-cellleftright

在 QuirksMode和MDN上阅读更多关于display: table和家庭的信息。

于 2013-07-19T05:47:56.233 回答
0

这就是我知道如何做到这一点的方式。使用绝对位置和顶部/底部/左侧更新您的小提琴：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;
}
于 2013-07-19T05:46:51.363 回答
0

在父 div 中使用最常用的 clearfix 类。这个问题已经可用。检查此链接。你如何防止浮动元素的父母崩溃？

于 2013-07-19T05:55:34.367 回答
-1

有一个答案和一个解决方案。高度不扩展是因为它是一个<div>并且<div>是块级元素。

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

下面是相同的工作演示。

工作演示

的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;
}
于 2013-07-19T05:47:29.977 回答
-1

将父元素设置为固定高度（比如 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;
    }
于 2013-07-19T05:48:41.863 回答