粘性页脚与灵活的框布局模型？

Question

我正试图通过最近版本的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确实按预期显示了事情。 Chrome/Chromium 25/26也是如此。

如果这是最近Chrome版本的回归，那么这个bug是否已经报告？

ADDED 在Chrome 29.表观错误仍然存​​在

Answer 1

变化高度最小高度：http://jsfiddle.net/n4rv8xws/

这个固定它为我在Chrome 39：

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

我同意与您的断言，这是一个Chrome回归。