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 |
CSS:
|
1
2 3 4 5 6 7 8 9 |
.wrapper {
overflow:hidden; } .left { |
我怎样才能给浮动 div package器的完整高度(其高度是变化的)？
没有jQuery可以吗？
测试：http://jsfiddle.net/Q6B43/
- 我实际上有同样的问题，我只设法用 jQuery 做到了。我很高兴知道是否有可能。
- How to make a float div 100% height of its parent？
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 { .right { |
浏览器兼容性很少，如果您返回查看版本。另外，我认为对于OP的场景来说会有点矫枉过正，但是对于以后更复杂的布局麻烦，这是一个非常强大的东西。
在小提琴中看到它。
- 仅仅因为元素具有固定宽度并不意味着绝对定位可以安全使用；导致问题的是元素的长度。
- @cimmanon，我同意。这就是我发布替代方案的原因。但在给定的示例中，唯一的问题是右侧 的内容。所以请让我梦想马丁知道任何时候左边的内容都是一行。 ;-) 在那种情况下，它会做我认为的工作。不对？
- 我无法想象在很多情况下，等高列的实例在其中一列中有单行的内容。如果是这样的话，那将是一个低效的布局。假设任一列/任何列可能是较高的列总是最安全的，因为这是最有可能的情况。
- @cimmanon，好吧，我重新排序并修改了我的答案，并试图满足您的正确反对意见。
- 谢谢，解决方案在这里工作。表格和固定package高度是不可能的。
- 如果在绝对定位解决方案上使用 top: 0 和 bottom: 0 ，则该列将拉伸以匹配其相对父级的高度。
- 顺便说一句，这种布局被称为”仿列”，并在 alistapart.com 上进行了讨论，我敢肯定，smasting 杂志也有一篇关于此的文章。只是谷歌它。
添加：
|
1
|
body, html { height:100% }
|
并给你的package器一个固定的像素高度。
来源：https://www.codenong.com/15817019/
