html - 带有灵活框布局模型的粘页脚？

我尝试用一个灵活的盒子布局模型来实现一个粘性的页脚，它是在Chrome和Firefox的最新版本中实现的。
给定body元素中的此标记：

<header>
    HEADER
</header>

<div>
    CONTENT
</div>

<footer>
    FOOTER
</footer>

我的想法是使用以下CSS：

html,
body {
    height: 100%;
}

body {
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

div {
    -webkit-flex: 1;
    flex: 1;
}

footer {
    background-color: yellow;
}

只要内容小于视窗高度的100%，这就可以正常工作。然而，当内容变大时，Chrome 28开始在内容的顶部绘制页脚。是错误的行为（如果：我该怎么解决）还是我的CSS错了？
你可以在这里测试Chrome的行为：http://jsfiddle.net/SYmJp/。
Firefox确实按预期显示了这个东西。铬/铬25/26也是。
如果这是最近Chrome版本中的一个回归，那么这个bug已经被报告了吗？
补充
这个明显的错误仍然存在于Chrome 29中。

最佳答案

将高度更改为最小高度：http://jsfiddle.net/n4rv8xws/
这在Chrome 39中为我修复了它：

html,
body {
    min-height: 100%;
}

我同意你的说法，这是一个铬回归。

关于html - 带有灵活框布局模型的粘页脚？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16624315/