html - 为什么漂浮在作为 body 标签的直接子项的包装器中接受 100% 高度

Question

解释我的问题的最佳方式是使用代码示例。我已经链接了两个 fiddle 。

Immediate Child
在这个例子中，.wrapper 是 body 的直接子元素，两个 float .left, .right 接受 height: 100%;

Nested Child
在这个例子中，.wrapper 不是 body 的直接子元素，两个 float .left, .right 不接受 高度:100%；

据我所知，height: 100%; 不适用于 float ，需要使用使用绝对位置和表格单元格等的技术。那为什么他们在前一种情况下工作。

PS:在最新稳定的 Chromium 和 Firefox 中测试

Answer 1

height: 100% 仅当父元素的高度不是auto 时才有效。

所以在你的第二个例子中，缺少的是 .container { height: 100%; and then it works.