如何用CSS实现内容不足时固定在底部的粘性页脚？

要实现内容不足时Footer固定在页面底部，内容充足时Footer跟随内容下方的效果，最可靠的方案是利用CSS Flexbox或Grid布局，以下是具体实现步骤：

方案一：Flexbox布局（推荐，兼容性好） #

1. 调整页面结构 #

确保页面内容和Footer被同一个根容器包裹（通常是<body>，也可以是自定义的.page-wrapper容器）：

<body>
  <!-- 页面主体内容区域 -->
  <div class="page-content">
    <!-- 包含标注的"This is test course"等内容 -->
  </div>

  <!-- 你的Footer代码 -->
  <div class="footer">
    <div class="card card-style m-0">
      <!-- Footer内部结构保持不变 -->
    </div>
  </div>
</body>

2. 添加CSS样式 #

给根容器设置垂直方向的Flex布局，并让内容区域自动填充剩余空间：

/* 根容器设置 */
body {
  margin: 0; /* 清除默认边距 */
  min-height: 100vh; /* 确保容器高度至少占满视口 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

/* 内容区域自动填充剩余空间 */
.page-content {
  flex: 1;
}

/* Footer保持原有样式，无需额外position设置 */
.footer {
  padding: 0px 15px 10px 15px;
  margin-bottom: 0px !important;
  z-index: 11;
}

方案二：Grid布局（更简洁） #

如果不需要兼容旧版浏览器，也可以用Grid布局快速实现：

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行自动填充，第二行自适应Footer高度 */
}

.footer {
  /* 保留原有样式即可 */
  padding: 0px 15px 10px 15px;
  margin-bottom: 0px !important;
  z-index: 11;
}

为什么你之前的方法无效？ #

• position: fixed：会让Footer固定在视口，内容过多时会遮挡页面内容，无法跟随内容滚动。
• padding-top: 15vh：硬编码高度，不同页面内容高度不同，会导致内容充足的页面出现多余空白。
• position: absolute：需要父容器设置position: relative，且当内容超过视口高度时，Footer会随父容器滚动，无法固定在底部。

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