关于css：如何在package器的全高处浮动一个元素？


How to float an element left with full height of the wrapper?

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        Foo
   
   
        Text row 1
   



   
        Foo Bar
   
   
        Text row 1
        Text row 2
        Text row 3

CSS:

1
2
3
4
5
6
7
8
9
.wrapper {
    overflow:hidden;
}

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

我怎样才能给浮动 div package器的完整高度(其高度是变化的)？

没有jQuery可以吗？

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

相关讨论

display: table 解决方案

在表格中，每行的每个单元格都具有相同的高度。

1
2
3
4
5
6
7
.wrapper {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}

这是我认为最好的解决方案，但在IE8之前不兼容。

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

使用绝对定位

绝对定位元素尊重它们的相对父元素 height:

1
2
3
4
5
6
7
8
9
.wrapper {
    position: relative;
    padding-left: 85px;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}

通常我不建议在大多数情况下使用绝对定位。但是因为你有一个固定的 width ，也许没关系。但请注意，这将忽略 .left 中的长内容。高度仅由 .right.

控制

这是您的 Fiddle 的更新。

flexible 解决方案

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

1
2
3
.wrapper {
    display: flex;
}

小提琴(在当前的 Chrome 和 Firefox 中测试)。

grid 布局

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

1
2
3
4
5
6
7
8
9
10
11
12
.wrapper {
    display: grid;
    grid-template-areas: 'left right';
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

浏览器兼容性很少，如果您返回查看版本。另外，我认为对于OP的场景来说会有点矫枉过正，但是对于以后更复杂的布局麻烦，这是一个非常强大的东西。

在小提琴中看到它。

相关讨论

添加：

1
body, html { height:100% }

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