如何正确构建HTML结构以确保Bootstrap页脚自动下沉-html教程-PHP中文网

如何正确构建HTML结构以确保Bootstrap页脚自动下沉

本教程旨在解决使用php `include` 和 bootstrap 5 时页脚与内容重叠的问题。核心在于纠正不正确的html结构，避免重复的``和`

`标签，合理放置css和javascript引用，并移除可能导致布局冲突的`vh-100`类，确保页脚能根据内容动态下沉。

在Web开发中，尤其是在使用PHP的include功能来构建模块化页面时，开发者常会遇到页脚（footer）与页面主体内容重叠的问题。这通常发生在页面主体内容增加，但页脚未能相应地向下推移时。本教程将深入分析这一问题的根源，并提供基于Bootstrap 5的最佳实践解决方案。

1. 理解页脚重叠问题

当页面内容动态变化或增加时，页脚理应自动调整位置，始终位于页面底部，且不会与主体内容发生重叠。然而，如果页面的HTML结构不规范、CSS样式设置不当或脚本引用有误，就可能导致页脚“固定”在某个位置，从而被增长的内容覆盖。

常见导致页脚重叠的原因包括：

HTML结构不规范： 在被include的文件中包含完整的、或标签，导致浏览器解析错误。
CSS定位问题： 对页脚或内容区域使用了position: fixed、position: absolute或height: 100vh等可能脱离文档流或强制高度的样式。
脚本引用问题： JavaScript文件未在正确位置引用，影响了页面渲染和布局计算。

2. 核心问题：不规范的HTML结构

在提供的代码中，navigation.php 文件包含了完整的、

和标签。当registration.php通过include "navigation.php"引入它时，实际上是在一个HTML文档内部插入了另一个完整的HTML文档结构，这在HTML标准中是不允许的。浏览器会尝试纠正这种错误，但结果往往是不可预测的布局问题，包括页脚重叠。

立即学习“前端免费学习笔记（深入）”；

原始 navigation.php 存在的问题：

// navigation.php (原始代码片段)
    <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">
        <!-- ... 导航栏内容 ... -->
    </nav>
    <br> // 不推荐使用 <br> 进行布局
    </body>
    </html>

登录后复制

同样，registration.php 在引入 navigation.php 之后，又再次声明了

标签，进一步加剧了结构混乱。

3. 解决方案一：规范化HTML文档结构

解决页脚重叠问题的首要步骤是确保整个网站只有一个规范的HTML文档结构。这意味着：

主页面（如 registration.php） 应该包含唯一的、和标签。所有全局的CSS和JavaScript引用也应在此处进行。
被 include 的文件（如 navigation.php 和 footer.php） 应该只包含它们各自的HTML片段，不应包含任何、或标签。

3.1 修正 registration.php (主页面)

registration.php 将作为页面的入口点，负责定义整个HTML文档的结构，并引入所有必要的CSS和JavaScript文件。

<!-- registration.php (修正后) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>SMS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入Bootstrap CSS -->
    <link href="bootstrapfile/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome或其他图标库CSS -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> -->
</head>
<body>
    <?php include "navigation.php"; ?>

    <main>
        <!-- 注册页面的主体内容 -->
        <section class="py-5"> <!-- 移除 vh-100，使用 py-5 增加垂直内边距 -->
            <div class="container">
                <div class="row d-flex justify-content-center align-items-center">
                    <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">
                                        @@##@@
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <?php include "footer.php"; ?>

    <!-- 引入Bootstrap JS (应放在 </body> 结束标签之前) -->
    <script src="bootstrapfile/bootstrap.bundle.min.js"></script>
</body>
</html>

登录后复制

3.2 修正 navigation.php (导航栏片段)

navigation.php 应该只包含导航栏的HTML代码。

<!-- navigation.php (修正后) -->
<nav class="navbar navbar-expand-sm bg-info navbar-light mb-2">
    <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>

登录后复制

注意： 移除了 ,

, 标签，并将
替换为 Bootstrap 的 mb-2 类，以提供底部间距。

3.3 修正 footer.php (页脚片段)

footer.php 应该只包含页脚的HTML代码。

Remover

几秒钟去除图中不需要的元素

304

查看详情

<!-- footer.php (修正后) -->
<footer class="text-center text-lg-start bg-info text-muted mt-auto"> <!-- 添加 mt-auto -->
    <!-- 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 class="">
        <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> <a class="__cf_email__" data-cfemail="5a33343c351a3f223b372a363f74393537" href="/cdn-cgi/l/email-protection">[email protected]</a>
                    </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="https://mdbootstrap.com/">MDBootstrap.com</a>
    </div>
    <!-- Copyright -->
</footer>

登录后复制

注意： 移除了 ,