使用 CSS 网格的粘页脚在 Firefox 中失败答案

【问题标题】：Sticky footer using CSS grid fails in Firefox使用 CSS 网格的粘页脚在 Firefox 中失败
【发布时间】：2017-03-24 09:45:46
【问题描述】：

我正在使用 CSS 网格（目前不在），但我无法在 Firefox 中使用粘性页脚。它在 Chrome 中运行良好，所以这可能是一个浏览器问题，但我尊重社区的更多知识。

我将我的 body 设置为主要的网格元素并像这样定义列/行：

body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: min-content min-content 1fr min-content;
    grid-template-columns: 1fr 15em;
    grid-template-areas: "masthead masthead"
                         "nav nav"
                         "main side"
                         "footer footer"
}

现在，我假设“grid-template-rows: min-content min-content 1fr min-content”意味着第 1、2 和 4 行将根据其内容假定大小，第 3 行将吸收所有剩余空间，这就是它在 Chrome 中的工作方式，而不是在 Firefox 中。

Codepen：http://codepen.io/anon/pen/NpzaRY

附言我应该在我的 DOM 资源管理器中添加，body 元素正确显示为填充窗口的整个高度。

【问题讨论】：

你用的是什么火狐版本？
52，即当前版本

标签： css css-grid

【解决方案1】：

这可能是 Firefox 的错误，但我真的不知道。我会选择auto 而不是1fr：

grid-template-rows: min-content min-content auto min-content;

http://codepen.io/anon/pen/bqKoaK

【讨论】：

自动工作。我看不出 1fr 不工作的理由，但如果我只有一个扩展行，可能值得记住。谢谢。