Creating a sticky footer inside a 3-row grid

user_49153 0
Viewed 193

I'm trying to create a 3-row layout (header, content, footer) using:

  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%; //keep this to prevent content overflowing outside container
  grid-gap: 2em;
  grid-template-areas:
                "header"
                "content"
                "footert";

I'm using align-self: end to have the footer always be at the bottom of the page.

The problem is, I want to make the footer sticky, so as the user scrolls up or down along the content, the footer always remains visible at the bottom.

If I use position: absolute or fixed though, this seems to break the footer out of the grid. Content continues to scroll over it like it wasn't there, and sometimes it also reduces the width of footer items.

Any ideas how to do this?

css-grid css-position css
3 Answers

Is this? Just add position: sticky and bottom:0. Also grid area is not needed.

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1500px auto;
  grid-template-columns: 100%;
  grid-gap: 2em;
}

.header {
  background: pink;
  height: 50px;
}

.content {
  background: aqua;
}

.footer {
  background: sandybrown;
  height: 50px;
  position: sticky;
  bottom: 0;
}
<div class="container">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

user_106987410

You can try like below:

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 2em;
}

.header {
  background: pink;
  height: 50px;
}

.content {
  background: aqua;
  font-size:40px;
}

.footer {
  box-shadow:0 -2em 0 0 #fff;
  background: sandybrown;
  height: 50px;
  position: sticky;
  bottom: 0;
}

body {
  margin:0;
}
<div class="container">
  <div class="header"></div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend enim sapien. Proin facilisis ornare mi, ut eleifend odio dictum vestibulum. Pellentesque arcu ex, vehicula eget porta at, maximus ac massa. In hac habitasse platea dictumst. Sed ultrices et massa a ultrices. Pellentesque scelerisque, neque vitae semper bibendum, risus dolor suscipit felis, id porttitor nisi justo et lectus. Mauris interdum ligula imperdiet nunc ornare, </div>
  <div class="footer"></div>
</div>

user_86203330

You could use position: sticky along with ::before pseudo-element to always keep some gap between the content and the footer.

Push the pseudo-element above the footer by translating it in negative Y-direction and then give it a background color same as that of the body. That will make it look like there's a gap between the footer and the content.

body {
  margin: 0;
  background: #fff;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: 30px 400px 30px;
  grid-gap: 1em;
}

.header {
  background: #22f;
}

.content {
  background: #fc9;
}

.footer {
  background: #ee1;
  position: sticky;
  bottom: 0;
}

.footer::before {
  content: '';
  position: absolute;
  background: #fff;
  width: 100%;
  height: 1em;
  transform: translateY(-100%);
}
<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

user_60943480
Related