2

我正在尝试使用最近版本的 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 版本的回归，是否已经报告了该错误？

添加 Chrome 29 中仍然存在明显的错误。

4

1 回答 1

0

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

这在 Chrome 39 中为我修复了它：

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

我同意您关于这是 Chrome 回归的说法。

于 2014-12-24T22:40:54.080 回答