如何在Bootstrap5中实现内容增加时Footer自动下移？

我把导航栏（navbar）和页脚（Footer）分别放在独立文件中，通过PHP include函数引入到每个页面。使用Bootstrap5开发时遇到问题：当body内内容较多时，主体内容会和Footer重叠。

页脚代码 #

<!-- Footer -->
<footer class="text-center text-lg-start bg-info text-muted">
    <!-- Section: Social media -->
    <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
    </section>
    <!-- Section: Social media -->

    <!-- Section: Links  -->
    <section>
        <div class="container text-center text-md-start mt-5">
            <!-- Grid row -->
            <div class="row mt-3">
                <!-- Grid column -->
                <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
                    <!-- Content -->
                    <h6 class="text-uppercase fw-bold mb-4">
                        <i class="fas fa-gem me-3"></i>Company name
                    </h6>
                    <p>
                        Here you can use rows and columns to organize your footer content. Lorem ipsum
                        dolor sit amet, consectetur adipisicing elit.
                    </p>
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
                    <!-- Links -->
                    <h6 class="text-uppercase fw-bold mb-4">
                        Products
                    </h6>
                    <p>
                        <a href="#!" class="text-reset">Angular</a>
                    </p>
                    <p>
                        <a href="#!" class="text-reset">React</a>
                    </p>
                    <p>
                        <a href="#!" class="text-reset">Vue</a>
                    </p>
                    <p>
                        <a href="#!" class="text-reset">Laravel</a>
                    </p>
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
                    <!-- Links -->
                    <h6 class="text-uppercase fw-bold mb-4">
                        Useful links
                    </h6>
                    <p>
                        <a href="#!" class="text-reset">Pricing</a>
                    </p>
                    <p>
                        <a href="#!" class="text-reset">Settings</a>
                    </p>
                    <p>
                        <a href="#!" class="text-reset">Orders</a>
                    </p>
                    <p>
                        <a href="#!" class="text-reset">Help</a>
                    </p>
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
                    <!-- Links -->
                    <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
                    <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
                    <p>
                        <i class="fas fa-envelope me-3"></i>
                        info@example.com
                    </p>
                    <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
                    <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
                </div>
                <!-- Grid column -->
            </div>
            <!-- Grid row -->
        </div>
    </section>
    <!-- Section: Links  -->

    <!-- Copyright -->
    <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
        © 2021 Copyright:
        <a class="text-reset fw-bold" href="#">MDBootstrap.com</a>
    </div>
    <!-- Copyright -->
</footer>
<!-- Footer -->

导航栏代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SMS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrapfile/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrapfile/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-info navbar-light">
    <a class="navbar-brand" href="#">SMS</a>
    <button class="navbar-toggler" type="button"  data-bs-toggle = "collapse" data-bs-target="#mango">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse"  id="mango">
        <ul class="navbar-nav" id="mango">
            <li class="nav-item">
                <a class="nav-link" href="">Home</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="">About us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">About us</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Login Panel</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="studentLogin.php">Student Login</a></li>
                    <li><a class="dropdown-item" href="#">Teacher Login</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<br>
</body>
</html>

注册页面代码（含include引入） #

<?php
include "navigation.php"
?>
<body>
<section class="vh-100" >
    <div class="container h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-lg-12 col-xl-11">
                <div class="card text-black" style="border-radius: 50px;">
                    <div class="card-body p-md-5">
                        <div class="row justify-content-center">
                            <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
                                <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
                                <form class="mx-1 mx-md-4">
                                    <div class="d-flex flex-row align-items-center mb-4">
                                        <i class="fas fa-user fa-lg me-3 fa-fw"></i>
                                        <div class="form-outline flex-fill mb-0">
                                            <input type="text" id="form3Example1c" class="form-control" />
                                            <label class="form-label" for="form3Example1c">Your Name</label>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-row align-items-center mb-4">
                                        <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
                                        <div class="form-outline flex-fill mb-0">
                                            <input type="email" id="form3Example3c" class="form-control" />
                                            <label class="form-label" for="form3Example3c">Your Email</label>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-row align-items-center mb-4">
                                        <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
                                        <div class="form-outline flex-fill mb-0">
                                            <input type="password" id="form3Example4c" class="form-control" />
                                            <label class="form-label" for="form3Example4c">Password</label>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-row align-items-center mb-4">
                                        <i class="fas fa-key fa-lg me-3 fa-fw"></i>
                                        <div class="form-outline flex-fill mb-0">
                                            <input type="password" id="form3Example4cd" class="form-control" />
                                            <label class="form-label" for="form3Example4cd">Repeat your password</label>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-row align-items-center mb-4">
                                        <i class="fas fa-key fa-lg me-3 fa-fw"></i>
                                        <div class="form-outline flex-fill mb-0">
                                            <input type="password" id="form3Example4cd" class="form-control" />
                                            <label class="form-label" for="form3Example4cd">Date of Birth</label>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-row align-items-center mb-4">
                                        <i class="fas fa-key fa-lg me-3 fa-fw"></i>
                                        <div class="form-outline flex-fill mb-0">
                                            <input type="password" id="form3Example4cd" class="form-control" />
                                            <label class="form-label" for="form3Example4cd">Date of Join</label>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
                                        <button type="button" class="btn btn-primary btn-lg">Register</button>
                                    </div>
                                    <div class="form-check d-flex justify-content-center mb-5">
                                        <label class="form-check-label" for="form2Example3">
                                            <a style="text-decoration: none" class="text-danger" href="studentLogin.php">Back to Login Page</a>
                                        </label>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
                                <img src="draw1.webp" class="img-fluid" alt="Sample image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<?php include "footer.php" ?>
</body>

修复方案 #

1. 重构导航栏文件，移除重复HTML结构 #

导航栏文件不应包含完整的<html>、<head>、<body>标签，否则include后会破坏页面DOM结构，只保留导航核心代码：

<!-- navigation.php 修正后 -->
<nav class="navbar navbar-expand-sm bg-info navbar-light">
    <a class="navbar-brand" href="#">SMS</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mango">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mango">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">About us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">About us</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Login Panel</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="studentLogin.php">Student Login</a></li>
                    <li><a class="dropdown-item" href="#">Teacher Login</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<br>

2. 修正注册页面的完整HTML框架 #

主页面需包含完整的HTML结构，公共资源引入放在这里，避免嵌套<body>：

<!-- 注册页面修正后 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>SMS - Sign Up</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrapfile/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrapfile/bootstrap.bundle.min.js"></script>
</head>
<body class="d-flex flex-column min-vh-100">
    <?php include "navigation.php" ?>

    <!-- 移除vh-100，改用min-vh-100给行元素，避免内容溢出时重叠 -->
    <section>
        <div class="container">
            <div class="row d-flex justify-content-center align-items-center min-vh-100">
                <!-- 原表单内容保持不变 -->
                <div class="col-lg-12 col-xl-11">
                    <div class="card text-black" style="border-radius: 50px;">
                        <div class="card-body p-md-5">
                            <div class="row justify-content-center">
                                <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
                                    <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign up</p>
                                    <form class="mx-1 mx-md-4">
                                        <!-- 表单内容省略，与原代码一致 -->
                                    </form>
                                </div>
                                <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
                                    <img src="draw1.webp" class="img-fluid" alt="Sample image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <?php include "footer.php" ?>
</body>
</html>

3. 调整页脚样式，实现自适应底部 #

给页脚添加mt-auto类，配合body的d-flex flex-column min-vh-100，让页脚自动推到页面底部：

<!-- footer.php 修正后 -->
<footer class="text-center text-lg-start bg-info text-muted mt-auto">
    <!-- 原页脚内容保持不变 -->
</footer>

关键问题说明 #

• 重复DOM结构：原导航栏包含完整HTML框架，include后页面出现多个<html>、<body>标签，导致布局混乱。
• vh-100误用：原主体section用vh-100强制占满视口高度，内容溢出时会覆盖页脚，改为min-vh-100可保证内容自动撑开。
• 自适应底部布局：通过Flexbox布局属性，让页脚在内容少时固定在底部，内容多时自动被推到页面末尾。

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