如何使用网格布局强制页脚位于空白/完整页的页底

Question

我有几页内容不多。整个网站都采用网格布局-基本页眉、主页和页脚：

​

​

这样做的目的是将页脚设置到屏幕底部，并在内容中添加空格，如果页面上没有像这样的内容，那么：

​

​

为了演示起见，我在本页中使用了50 of的页边距。

但是，例如，如果博客帖子大于100 on，那么页脚仍然应该出现在底部-当然，没有空格：

​

​

用户需要滚动才能看到页面底部的页脚。

实现这种行为的“最佳实践”(-way)是什么(最好没有JS(?))？

可能想查看网页结构的人的一些代码：

/* inside this class the content is wrapped into the grid layout */
.container {
  display: grid;

  grid-template-areas:
  "header header header header header"
  ". recent-posts recent-posts recent-posts ."
  "footer footer footer footer footer";

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 10px;
}

/* setting header, main and footer as grid layout */
header {
  grid-area: header;

  border-bottom: 1px solid;
  border-radius: 4px;
  margin-bottom: 2vh;

}

main {
  grid-area: recent-posts;
}

footer {
  grid-area: footer;

  margin-top: 1vh;
  padding: 0.2vh;
  border: 1px solid;
  border-radius: 4px;
}

如果有人想查看整个代码，我会在我的GitLab上发布源代码。

Answer 1

我想出了一个解决方案，也许能在未来帮助别人：

在.container类中，我添加了：

.container {
[…]
/* this forces the footer to stay at the bottom even if the content doesn't fill up the page */
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

其中，grid-template-rows等于网格布局的行数。

我编辑了CSS-文件，以删除整个网格布局周围的填充，这使得页面比100vh大一点点，并以这种方式添加了一个滚动条。

相反，我为页眉和页脚本身添加了一个边距：

页脚在低内容页上 有更多内容的页脚

在移动平台上，您可能需要滚动以查看由于地址栏而产生的内容：

登陆移动入门页面 在手机上滚动查看100 to

我把这个问题标记为解决了这个问题，就像这个解决方案做了我想做的那样；但是，如果有人知道更好的方法，请写一个答案！

Answer 2

因此，如果我们在本例中使用flexbox，这将是如何实现的。

section将充当除页眉和页脚以外的整个数据的容器。由于该部分被定义为flex:1，因此它将占用除页眉和页脚以外的整个空间。

这样，如果内容在部分溢出，页脚也会进一步向下推。你不必担心任何这样的情况。

​

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header, section, footer {
  border: 1px solid #ddd;
  padding: 10px;
}

section {
  flex: 1;
}

<main>
    <header>
        Something
    </header>
    <section class="container">Another thing</section>
    <footer>
        Footer
    </footer>
</main> 

​