1

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

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

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。

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

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

4

1 回答 1

2

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

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

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

于 2017-03-24T09:49:58.783 回答