Липкий нижний колонтитул с гибкой моделью макета коробки?

Question

Я пытаюсь реализовать липкий нижний колонтитул с гибкой моделью макета коробки, как реализовано в последних версиях Chrome и Firefox.

Учитывая эту разметку внутри элемента кузова:

<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, об этой ошибке уже сообщалось?

ДОБАВЛЕНО Очевидная ошибка сохраняется в Chrome 29.

Answer 1

Изменить высоту до минимальной высоты: http://jsfiddle.net/n4rv8xws/

Это установил ее для меня в Chrome 39:

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

Я согласен с вашим утверждением, что это регрессия Chrome.