将浮动div设置为高度：100％？ [英] Set floating div to height: 100%?

问题描述

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

I suspect there is no answer to this but I was wondering if there is a way to set the height of a floating div to 100%?

我有两个包装器div中的div：

I have two divs within a wrapper div:

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

右div的高度已设置，我希望左div与其匹配，所以我创建了：

The right div has a set height and I want the left div to match it, so I created:

#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/

but the left div doesnt expand. Fiddle here: http://jsfiddle.net/8dstK/2/

有人会知道达到相等高度的div的方法吗？

Would anyone know a way to achieve divs of equal height?

我应该只使用JQuery来获取正确div的高度并应用

Should I just use JQuery to grab the height of right div and apply it to left div?

推荐答案

您可以通过设置< ; div> s，然后使用 display：table ， display：table-cell 等。这将起作用，因为同一行中的表格单元格会自动调整为与最高单元格相同的高度。但是，IE7及以下版本不支持 display：table 。

You could do it by setting up a table-like scructure of <div>s in your HTML and then using display: table, display: table-cell, etc. This will work because table cells in the same row automatically resize to the same height as the tallest cell. However, IE7 and below 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粘在一起。表单元格不接受边距，仅接受填充。您可能需要一个额外的显示：table-cell div在 left 和 right 分隔它们，如果您不希望使用填充分隔它们。

I had to remove float: left and float: right from #left and #right to get the table-cell display to work, since table cells can’t float. However, this has stuck the two divs together. And table cells do not accept margins, only padding. You may need an extra display: table-cell div between left and right to separate them, if you don’t want padding separating them.

了解有关 display：table 和家人在QuirksMode上和在MDN上。

这篇关于将浮动div设置为高度：100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！