html - 高度 :100%; 的问题

Question

我正在围绕 height:100% 构建一些测试。

关于THIS页面，您会注意到蓝色区域不会随着页面内容拉伸(stretch)其高度，即使它被指定为具有以下 CSS 样式:

html{ height:100%; }
body{ height:auto; }

我试过没有成功:

body{ height:100%; }

对解决或试图理解这种行为有什么帮助吗？

Answer 1

您尝试做的事情被称为“人造列”，不幸的是答案不是 height: 100%。许多博主/开发人员已经详细讨论了这个问题，但我发现的各种技术的最佳综述在 this article 中。由 CSS Tricks 的 Chris Coyier 撰写。它专门解决了流体布局中的人造列，这就是您在 fiddle 中尝试做的事情。

这是 Coyier 的伟大文章 CodePen 中的一个演示网站:

http://codepen.io/cantera25/pen/lILha