CODEWITHSUNDEEP
csscss-grid
chrism
chrism

Reputation: 2933

Sticky footer using CSS grid fails in Firefox

I'm playing with CSS grids (who isn't at the moment), and I cannot get a sticky footer to work in Firefox. It works fine in Chrome, so maybe this is a browser issue, but I defer to the communities greater knowledge.

I'm setting my body to be the main grid element and defining the columns/rows like so:

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"
}

Now, I would assume that 'grid-template-rows: min-content min-content 1fr min-content' would mean that rows 1, 2 and 4 would assume a size based on their content, and row 3 would absorb all the remaining space, and that's how it works in Chrome, but not Firefox.

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

p.s. I should add that in my DOM explorer, the body element is correctly displayed as filling the whole height of the window.

Upvotes: 1

Views: 656

Answers (1)

nils
nils

Reputation: 27194

This might be a Firefox bug, but I honestly don't know. I would go with auto instead of 1fr:

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

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

Upvotes: 2

Related Questions