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

Question

我正在玩 CSS 网格（目前没有），我无法在 Firefox 中使用粘性页脚。它在 Chrome 中运行良好，所以这可能是浏览器问题，但我希望社区提供更多知识。

我将我的 body 设置为主网格元素并定义 columns/rows 如下：

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 行将吸收所有剩余的 space，这就是它在 Chrome 中如何工作，但在 Firefox 中不工作。

代码笔：http://codepen.io/anon/pen/NpzaRY

p.s。我应该补充一点，在我的 DOM 浏览器中，body 元素正确显示为填充 window.

的整个高度

Answer 1

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

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

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

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

Sticky footer using CSS grid fails in Firefox

css

css-grid