CSS 如何在包装器的全高处浮动元素?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15817019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to float an element left with full height of the wrapper?
提问by Martin
HTML:
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:
CSS:
.wrapper {
overflow:hidden;
}
.left {
width:80px;
float:left;
height:100%;
}
How can I give the floating div the full height of the wrapper (whose height is varying)?
如何为浮动 div 提供包装器的完整高度(其高度不同)?
is it possible without jQuery?
没有jQuery有可能吗?
回答by Linus Caldwell
The display: table
solution
该display: table
解决方案
Within tables each cell of a row has the same height.
在表格中,一行的每个单元格都具有相同的高度。
.wrapper {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
}
This is the best solution in my opinion, but is not compatible before IE8.
这是我认为最好的解决方案,但在 IE8 之前不兼容。
Here is the Fiddlefor this solution.
这是此解决方案的小提琴。
Using absolute positioning
使用绝对定位
Absolute positioned elements respect their relative parents height
:
绝对定位元素尊重它们的相对父元素height
:
.wrapper {
position: relative;
padding-left: 85px;
}
.left {
position: absolute;
left: 0;
top: 0;
}
Normally I would notrecommend absolute positioning in most situations. But as you have a fixed width
anyway, maybeit does not matter. But be aware of the fact that this will ignore long contents in .left
. The height is just controlled by .right
.
通常在大多数情况下我不会推荐绝对定位。但既然你有一个固定的width
无论如何,也许这并不重要。但请注意,这将忽略.left
. 高度仅由 控制.right
。
Here is an update to your Fiddle.
The flex
ible solution
该flex
IBLE解决方案
This is so new I would not recommend using it right now, but just to be complete.You could use CSS3 flex
, but be aware of browser compatibility:
这是如此新,我不建议现在使用它,但只是为了完整。您可以使用 CSS3 flex
,但要注意浏览器兼容性:
.wrapper {
display: flex;
}
The Fiddle(tested in current Chrome and Firefox).
The Fiddle(在当前的 Chrome 和 Firefox 中测试)。
The grid
layout
该grid
布局
Even newer than flexbox, CSS grid
seams to be the perfect answer for layout questions.
甚至比 flexbox 更新,CSSgrid
接缝是布局问题的完美答案。
.wrapper {
display: grid;
grid-template-areas: 'left right';
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
Browser compatibilityis rare, if you go back a view versions. Besides, it would be overkill for the OP's scenario in my opinion, but for more complex layout troubles in the future, this is a very powerful thing.
浏览器兼容性很少见,如果您返回查看版本。另外,在我看来,这对于OP的场景来说有点矫枉过正,但对于未来更复杂的布局麻烦,这是一个非常强大的东西。
See it in the Fiddle.
在Fiddle 中看到它。
回答by Diodeus - James MacFarlane
Add:
添加:
body, html { height:100% }
And give your wrapper a fixed height in pixels.
并为您的包装器提供以像素为单位的固定高度。