如何以包装器的全高浮动元素？

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

添加：

body, html { height:100% }

并给你的包装一个固定的像素高度。

Answer 2

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。

flexible 解决方案

这是太新了，我不建议现在使用它，但只是为了完整。你可以使用 CSS3 flex，但要注意browser compatibility：

.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 中查看。