Bootstrap 5.2.2页脚无法固定到底部（Laravel Inertia Vue项目）

我的项目采用Laravel Inertia Vue技术栈，依赖Bootstrap 5.2.2。CSS已加载到<head>标签中，想要实现粘性页脚，但页脚无法固定在页面底部。尝试过相关解决方案但未解决问题，以下是我的代码：

Blade 入口文件代码 #

<!DOCTYPE html>
<html class="h-100">

<head>
    <meta charset="utf-8" />
    <meta name="description" content="Website name" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
    <link href="{{ asset('/css/offcanvas.css') }}" rel="stylesheet"/>
    <script src="{{ mix('/js/app.js') }}" defer></script>
        
</head>

<body class="d-flex flex-column h-100">
  @inertia
</body>

</html>

Vue 布局组件代码 #

<template>
    <header>
        <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
           // 导航内容
        </nav>
    </header>

    <div class="nav-scroller bg-body shadow-sm">
        <nav class="nav" aria-label="Secondary navigation">
            <span class="nav-link">请选择菜单:</span>
            <Link class="nav-link" v-for="(menu, index) in menus" :key="index" :href="`/page/${menu.id}`">{{
        menu.name
            }} </Link>
        </nav>
    </div>

    <main class="flex-fill">
        <div class="container">
            <slot />
        </div>
    </main>

    <footer class="footer mt-auto py-3 bg-light">
        <div class="container">
            <span class="text-muted">粘性页脚内容放在这里。</span>
        </div>
    </footer>

</template>

解决方法 #

问题核心在于固定导航栏的文档流脱离和Inertia根容器的高度继承缺失，按以下步骤调整即可修复：

1. 给body添加顶部内边距，避免内容被固定导航遮挡
   固定导航栏会脱离文档流，需给body设置等于导航栏高度的顶部内边距（默认Bootstrap导航栏高度为56px）：

   body {
       padding-top: 56px;
   }
   

2. 确保Inertia根容器继承完整高度
   Inertia自动生成的根容器（默认类为inertia-page）需要开启flex布局并占满可用高度，否则flex-fill无法生效，在全局CSS中添加：

   .inertia-page {
       display: flex;
       flex-direction: column;
       min-height: 100vh;
       width: 100%;
   }
   

3. 调整布局组件的根容器结构
   将布局内所有内容包裹在d-flex flex-column min-vh-100的容器中，确保flex布局层级正确传递：

   <template>
       <div class="d-flex flex-column min-vh-100">
           <header>
               <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
                   // 导航内容
               </nav>
           </header>
   
           <div class="nav-scroller bg-body shadow-sm">
               <nav class="nav" aria-label="Secondary navigation">
                   <span class="nav-link">请选择菜单:</span>
                   <Link class="nav-link" v-for="(menu, index) in menus" :key="index" :href="`/page/${menu.id}`">{{
               menu.name
                   }} </Link>
               </nav>
           </div>
   
           <main class="flex-fill">
               <div class="container">
                   <slot />
               </div>
           </main>
   
           <footer class="footer mt-auto py-3 bg-light">
               <div class="container">
                   <span class="text-muted">粘性页脚内容放在这里。</span>
               </div>
           </footer>
       </div>
   </template>
   

4. 验证高度继承链
   确保html、body、Inertia根容器、布局根容器都正确继承了100%高度，这样Bootstrap的flex布局才能将页脚自动推至页面底部。

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