How to use CSS grid layout for footer on mobile device

Question

I've recently started using CSS grid layout for a web application. I found a nice example at https://duwp7.csb.app/ that does what I want when on a desktop browser. I really like that I don't need to use javascript to pad the main content to make room for the header and footer.

However when I use a mobile browser I find that the footer is below the bottom of the screen and I need to scroll to get to it. Is it possible to use a CSS grid layout footer on a mobile device? Or do I need to stick with my CSS + javascript solution?

The CSS that I'm using is below. "fll-sw-ui-body" is used for the container element.

.fll-sw-ui-body {
    /* make sure that only the content scrolls */
    overflow: hidden;
    /* use full viewport for elements, also avoids pushing elements off the screen when using full height */
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'header' 'main' 'footer';
}

.fll-sw-ui-body>header, .fll-sw-ui-body>footer {
    text-shadow: 0 1px 0 #eee;
    background: #333;
    z-index: 1000;
    background-color: #e9e9e9;
    border-color: #ddd;
}

.fll-sw-ui-body>header {
    grid-area: header;
}

.fll-sw-ui-body>main {
    grid-area: main;
    overflow: auto;
    background-color: #f9f9f9;
}

.fll-sw-ui-body>footer {
    grid-area: footer;
}

HTML code

<body class='fll-sw-ui-body'>
    <header>
        header content ...
    </header>
    <main>
        main content ...
    </main>
    <footer>
        footer content ...
    </footer>
</body>

What does your css code look like? – Geshode Aug 01 '22 at 01:39 — Geshode, Aug 01 '22 at 01:39
I've added my css and example HTML. – Jon Aug 01 '22 at 11:59 — Jon, Aug 01 '22 at 11:59

score 1 · Accepted Answer · answered Aug 04 '22 at 02:30

I figured it out when while reading https://stackoverflow.com/a/68749468/2965897. The key is to use 100% instead of 100vh for the main container AND make sure to set the height of all parent elements to 100% as well. The working example is below.

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <meta charset="UTF-8">
  
<style>
body {
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 'header' 'main' 'footer';
  
  overflow: hidden;
  
}

html {
    height: 100%;
}

header, footer, main {
  padding: 20px;
  justify-content: center;
  align-items: center;
}

header {
  background-color: lightblue;
  grid-area: header;
}

footer {
    background-color: lightgrey;
    grid-area: footer;
}

main {
    overflow: auto;
    grid-area: main;
}
</style>

</head>

<body translate="no">

  <header>Header</header>
  <main>Main
          <div>Top line</div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            Text here.
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>
            More....
          </div>
          <div>Bottom line</div>

  </main>
  <footer>Footer</footer>
 
</body></html>

blackcityhenry · Answer 2 · 2022-08-02T02:05:55.610

0

The example given doesn't really show how should the footer be placed correctly. The example is putting footer inside of main.

For me I usually put header, main and footer under body with the same level.

<body>
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</footer>
</body>

So that you can style the layout in css grid. We're pushing the footer to the bottom by growing main.

body {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

TL;DR

https://codepen.io/blackcityhenry/pen/BarJOGe

EDIT

I tried your example and the issue I have with it is that the footer isn't fixed at the bottom. When I add more content to main so that it overflows the footer isn't visible until one scrolls to it.

So I guess you want a footer always on the bottom of the screen and it will always be visible.

If you want to get rid of scrolling among body, you will then have to set the body's height to 100vh and make main the actual scrollable area.

body {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

main {
  overflow-y: auto; //or 'scroll'
}

Codepen

edited Aug 02 '22 at 02:05

answered Aug 01 '22 at 08:39

blackcityhenry

691
1
6
22

I fixed the link to the example app. I'm working from the article https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/ and meant to post the first example https://duwp7.csb.app/ not the second one with footer inside of main. – Jon Aug 01 '22 at 11:55
I tried your example and the issue I have with it is that the footer isn't fixed at the bottom. When I add more content to main so that it overflows the footer isn't visible until one scrolls to it. – Jon Aug 01 '22 at 12:05
So you actually want a `footer` which is always stick to the bottom of the screen and is always visible? – blackcityhenry Aug 02 '22 at 01:38
OK, I tried that at https://mtu.net/~jpschewe/temp/grid-03.html, but that didn't appear to put the footer at the bottom, what am I missing? The one at https://mtu.net/~jpschewe/temp/grid-02.html works in a desktop browser, but doesn't work on mobile. – Jon Aug 03 '22 at 02:45

How to use CSS grid layout for footer on mobile device

2 Answers2