如何浮动只剩下包装的全高度的元素？(How to float an element left wit

HTML：

<div class="wrapper">
    <div class="left">
        Foo
    </div>
    <div class="right">
        Text row 1
    </div>
</div>

<div class="wrapper">
    <div class="left">
        Foo Bar
    </div>
    <div class="right">
        Text row 1<br>
        Text row 2<br>
        Text row 3
    </div>
</div>

CSS：

.wrapper {
    overflow:hidden;
}

.left {
    width:80px;
    float:left;
    height:100%;
}

我怎么可以给浮动DIV包装（其高度变化）的整个高度？

是否有可能不jQuery的？

测试： http://jsfiddle.net/Q6B43/

Answer 1:

的display: table溶液

在表行的每个单元具有相同的高度。

.wrapper {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}

这是我认为最好的解决办法，但不是IE8兼容之前 。

这里是小提琴此解决方案。

使用绝对定位

绝对定位的元素尊重他们的父母相对height ：

.wrapper {
    position: relative;
    padding-left: 85px;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}

通常我不会建议在大多数情况下绝对定位。 但是当你有一个固定的width ，无论如何， 也许这并不重要。 但要注意的是，这会忽略长期的内容.left 。 高度仅通过控制.right 。

下面是一个更新你的小提琴 。

该flex IBLE解决方案

这是太新我不建议现在使用它，但为了完整。 你可以使用CSS3 flex ，但要注意的浏览器兼容性 ：

.wrapper {
    display: flex;
}

该小提琴 （在目前的Chrome和Firefox测试）。

该grid布局

甚至比Flexbox的更新，CSS grid接缝是布局问题完美的答案。

.wrapper {
    display: grid;
    grid-template-areas: 'left right';
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

浏览器兼容性是罕见的，如果你回去查看版本。 此外，这将是矫枉过正的OP在我看来的场景，但在未来更复杂的布局的麻烦，这是一个非常强大的东西。

看到它的小提琴 。

Answer 2:

加：

body, html { height:100% }

并给您的包装以像素为单位的固定高度。

文章来源: How to float an element left with full height of the wrapper?