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版本中的回归，那么该错误是否已报告？

ADDED Chrome 29中仍存在明显错误。

Answer 1

将高度更改为最小高度：http://jsfiddle.net/n4rv8xws/

这在Chrome 39中为我解决了这个问题：

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

我同意你的断言，这是Chrome回归。

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

1 个答案: