如何在具有网格布局的空/整页上强制页脚位于页面底部

Posted 2023-03-21

【中文标题】如何在具有网格布局的空/整页上强制页脚位于页面底部

【英文标题】：How can I force footer on bottom of page on empty/full page with grid layout

【发布时间】：2021-11-12 07:40:50

【问题描述】：

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

目标是将页脚设置在屏幕底部，并在内容中留出空白，如果页面上没有很多这样的内容：

出于演示目的，我在此页面上使用了 50vh 的 margin-bottom。

但是，例如，如果一篇博文大于 100vh，页脚仍应出现在底部 - 当然没有空格：

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

什么是实现这种行为的“最佳实践”方式（最好不使用 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。

【问题讨论】：

您是否尝试应用“底部：0；”和“位置：绝对”到您的页脚 css`？

你不能为此使用 flexbox 并让它更容易吗？

@AbinThaha Flexbox 和 Grid 布局有不同的用途。如果您能熟练使用 Flexbox，那就太好了，但这不是我所要求的。无论如何感谢您的阅读！ :) Difference between Flexbox and Grid by the MDN

他们有不同的目的，我完全同意。但是在阅读了你的问题之后，我觉得 flexbox 会是一个更好的解决方案。 @Simpletech

【参考方案1】：

如果我们在这种情况下使用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> 

【参考方案2】：

我想出了一个可能会在未来帮助其他人的解决方案：

在我添加的.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 稍大一点，并以这种方式添加了一个滚动条。

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

footer on low-content pages footer with more content

在移动设备上，由于 URL 栏，您可能需要滚动才能查看内容：

landing on mobile startpage scroll on mobile to see 100vh

---

我将此问题标记为已解决，因为此解决方案完全符合我的要求；不过，如果有人知道更好的方法，请写一个答案！