在 3 行网格内创建粘性页脚

Question

我正在尝试使用以下方法创建 3 行布局（页眉、内容、页脚）：

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

我正在使用 align-self: end 让页脚始终位于页面底部。

问题是，我想让页脚变粘，这样当用户沿着内容向上或向下滚动时，页脚始终在底部可见。

如果我使用 position: absolute 或固定，这似乎会使页脚脱离网格。内容继续滚动，就像它不存在一样，有时它还会减少页脚项目的宽度。

知道怎么做吗？

Answer 1

这是？只需添加 position: sticky 和 bottom:0。也不需要网格区域。

.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>

Answer 2

您可以尝试如下：

.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>

Answer 3

您可以将 position: sticky 与 ::before 伪元素一起使用，以始终在内容和页脚之间保持一些间隙。

通过向负 Y 方向平移伪元素，将其推到页脚上方，然后为其设置与 body 相同的背景颜色。这将使页脚和内容之间看起来像是有间隙。

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>

在 3 行网格内创建粘性页脚

Creating a sticky footer inside a 3-row grid

css

css-position

css-grid