正确答案
The display: table
solution
正确答案
The display: table
solution
Within tables each cell of a row has the same height.
.wrapper {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
float: none;
}
This is the best solution in my opinion, but is not compatible before IE8.
Here is the Fiddle for this solution.
Using absolute positioning
Using absolute positioning
Absolute positioned elements respect their relative parents
height
:
.wrapper {
position: relative;
padding-left: 85px;
}
.left {
position: absolute;
left: 0;
top: 0;
}
Normally I would not recommend absolute positioning in most situations. But as you have a fixed
width
anyway, maybe it does not matter. But be aware of the fact that this will ignore long contents in.left
. The height is just controlled by .right
.
Here is an update to your Fiddle.
The flex
ible solution
The flex
ible solution
This is so new I would not recommend using it right now, but just to be complete. You could use CSS3
flex
:
.wrapper {
display: flex;
}
The Fiddle (tested in current Chrome and Firefox).
来自 http://stackoverflow.com/questions/15817019/how-to-float-an-element-left-with-full-height-of-the-wrapper
190 45 | Here is the HTML:
And here is the CSS:
|