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

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

在我看来,这是最好的解决方案,但在IE8之前不兼容.

这是这个解决方案的小提琴.

使用绝对定位

绝对定位的元素尊重他们的亲戚height:

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

通常我不建议在大多数情况下使用绝对定位.但是,width无论如何你都有固定的,也许没关系.但请注意,这将忽略长篇内容.left.高度只是由.right.

这是你的小提琴的更新.

该flexIBLE解决方案

这是新的我不建议现在使用它,但只是为了完整.您可以使用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的场景来说会有些过分,但对于未来更复杂的布局问题,这是一个非常强大的功能.

在小提琴中看到它.