Why doesn't this Grid sticky footer work?

HTML & CSS
1

I’m using the instructions here: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers

I’m expecting that the footer will stick to the bottom of the viewport even when the user scrolls. If there isn’t much content in the middle row, it will still stick. But I don’t see that functionality in the desktop browser; the footer is either high with little content, or it rolls down with long content.

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
		<style>
body {
  margin: 0; /* prevents scrollbars */
}
#app {
  min-height: 100%;
    display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto 1fr;
  grid-template-areas: 
    'header'
    'main'
    'footer';
	padding: 1em;
	}
	
.header {
  grid-area: header;
  background-color: yellow;
  height: 3em;
  overflow: auto;
}

.main {
  grid-area: main;
  padding: 15px 5px 10px 5px;
}

.footer {
  grid-area: footer;
  background-color: orange;
  height: 3em;
}
		</style>

<div id="app">
	<div class="header">this is the header</div>
	<div class="main"></div>this is the countdown, Main<br><br>Did not work: https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/
	<br><br>Did not work (this code is shown): https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers
	<br><br><span style="font-size: 24px">
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos t dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolo</span></div>

	<div class="footer">this is the footer</div>

</div>
    </body>
</html>
2

OK, I get it. Why isn’t this information in the article?

html {
  height:100%; // NEED THIS
}
body {
  margin: 0; /* prevents scrollbars */
  padding 0;
  height:100%; // NEED THIS
}

#app {
  min-height: 100%; // NEED THIS

.footer {
  grid-area: footer;
  background-color: orange;
  height: 3em;
  position: -webkit-sticky; // NEED THIS
  position: sticky; // NEED THIS
  bottom: 0; // NEED THIS
}
2 Likes
3

They have supplied the code in the download link but I wouldn’t use it as its badly broken and misunderstands how height:100% works.

Most of these sticky footer articles are flawed in some way and I should know as I invented the original technique back in 2002.

These days it’s much easier with flexbox and grid (or even display:table) but you do have to set it up properly and not keep throwing height:100% into internal elements unless you know the consequences.

Also note that the article is talking about a ‘sticky footer’ and not a position:sticky footer which are different things although it seems you want both (which is fine). A sticky footer is commonly one that sits on the bottom of the viewport when there is no enough content to hold it down but as content increases below the fold it will move down with the content and not stay on the bottom of the viewport.

A position:sticky footer on the other hand will stick at a required place on the element’ s container which may or may not be the viewport. Position:fixed is fixed in relation to the viewport at all times but is not as useful as position:sticky when done properly.

You still have errors in your cde where you have min-height:100% plus you have added padding so already you have created a vertical scrollbar when none is needed (100% + 2em padding is bigger than 100%). Use the border-box: model to account for padding within the height.

Also don’t use fixed heights for the header and footer because if I zoom my text or the text wraps to more lines than expected then the layout breaks.

Don’t use spans and breaks to make space when you can simply use the p tag.

You closed the element called main too early and broke the grid.

The padding on the bottom of .app is not a good idea as the sticky footer will bob up and down over it.

I tidied your code up to account for all of the above.

Hope it helps :slight_smile:

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.