如何在Admin Template 5.3.0中添加Sticky Footer

针对Bootstrap 5.3的Dashboard示例，要实现内容不足时固定在视口底部、内容过长时跟随在内容下方的sticky footer，可按以下步骤操作：

1. 调整HTML结构 #

利用Bootstrap内置的flex布局类，重新组织页面结构：

• 给<body>添加d-flex flex-column min-vh-100，让body成为垂直flex容器且高度至少占满视口
• 把原有页面内容（顶部导航、侧边栏、主内容）包裹进带flex-grow-1的容器（比如.content-wrapper），让这个容器占据body的剩余空间
• 在容器外部添加footer元素，并用mt-auto让它自动被推到底部

修改后的核心结构示例：

<body class="d-flex flex-column min-vh-100">
  <!-- 原有顶部导航 -->
  <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    ...
  </header>

  <!-- 包裹原有内容的容器 -->
  <div class="content-wrapper flex-grow-1">
    <div class="container-fluid">
      <div class="row">
        <!-- 原有侧边栏 -->
        <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
          ...
        </nav>
        <!-- 原有主内容区 -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
          ...
        </main>
      </div>
    </div>
  </div>

  <!-- 新增的Footer -->
  <footer class="bg-light py-3 mt-auto">
    <div class="container-fluid">
      <span class="text-muted">© 2024 你的管理员面板</span>
    </div>
  </footer>
</body>

2. 适配侧边栏固定布局 #

原Dashboard的侧边栏在中等及以上屏幕是固定定位（position: fixed），需要避免footer被侧边栏遮挡，可添加响应式padding：

@media (min-width: 768px) {
  footer {
    padding-left: 220px; /* 匹配侧边栏的宽度，可根据实际调整 */
  }
}

3. 可选：固定Footer高度（按需） #

如果需要footer高度固定，可添加样式：

footer {
  height: 60px; /* 自定义高度 */
}

/* 同时给主内容区加底部padding，避免长内容被footer遮挡 */
main {
  padding-bottom: 70px; /* 比footer高度多10px，预留间距 */
}

这样就能完美实现符合需求的sticky footer，适配不同内容长度的场景。

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