粘性頁腳與靈活的框佈局模型？

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迴歸。