如何使用包装器的整个高度浮动一个元素？

Question

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;
}

在我看来，这是最好的解决方案，但是not compatible before IE8。

以下是此解决方案的Fiddle。

使用绝对定位

绝对定位元素尊重其亲属父母height：

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

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

这是update to your Fiddle。

flex解决方案

这是新的我不建议立即使用它，但只是为了完整。你可以使用CSS3 flex，但要注意browser compatibility：< / p>

.wrapper {
    display: flex;
}

Fiddle（在当前的Chrome和Firefox中测试过）。

grid布局

即使比flexbox更新，CSS grid接缝也是布局问题的完美答案。

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

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

如果您返回视图版本，

Browser compatibility很少见。此外，在我看来，对于OP的场景来说会有点过分，但对于未来更复杂的布局问题，这是一个非常强大的功能。

在Fiddle。

中查看

Answer 2

添加：

body, html { height:100% }

并为您的包装器提供固定高度（以像素为单位）。