Grid布局下如何实现短内容页页脚置底、长内容页页脚跟随底部

你可以基于现有的Grid布局稍作修改就能实现需求，完全不需要JavaScript，属于纯CSS的原生最佳实践。

第一步：添加全局基础样式重置，避免默认样式干扰 #

* {
  box-sizing: border-box;
}
html, body {
  min-height: 100vh;
  margin: 0;
}

box-sizing 统一盒模型计算规则，清除body默认外边距，给根元素设置最小高度为一屏高度，为后续容器高度适配打基础。

第二步：修改.container的样式，新增最小高度和行高规则 #

.container {
  display: grid;
  min-height: 100vh; /* 新增：容器最小高度为一屏 */
  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));
  grid-template-rows: auto 1fr auto; /* 新增：三行分别对应header、main、footer的高度规则 */
  gap: 10px;
}

规则说明：

• 两个auto值分别对应header行、footer行，代表高度完全由自身内容决定，不会被拉伸
• 中间的1fr值对应main所在的行，会自动占据Grid容器剩余的所有可用高度：当页面内容不足一屏时，这部分自动撑开空白区域，把footer顶到视口底部；当内容超过一屏时，这部分高度会随内容自动扩展，footer自然跟随在内容末尾
• 你原有的其余header、main、footer的样式不需要做任何修改，完全兼容原有布局逻辑

内容的提问来源于stack exchange，提问作者user14854027