29

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/

4

2 回答 2

56

解决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。

这是您的 Fiddle 的更新。

flex可行的解决方案

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

.wrapper {
    display: flex;
}

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

grid布局_

甚至比 flexbox 更新，CSSgrid接缝成为布局问题的完美答案。

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

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

如果您返回查看版本，则浏览器兼容性很少。此外，在我看来这对于OP的场景来说是大材小用，但对于未来更复杂的布局麻烦，这是一个非常强大的东西。

在Fiddle中看到它。

于 2013-04-04T16:51:15.333 回答
-10

添加：

body, html { height:100% }

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

于 2013-04-04T16:50:08.560 回答