关于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器一个固定的像素高度。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269250.html