如何用Bootstrap 5居中404页面内容且避免Footer遮挡问题

问题根源是你用绝对定位来居中内容和固定Footer，这种方式没考虑两者的空间关系，小屏时Footer高度变大就会遮挡内容。改用Bootstrap原生Flex布局可完美解决，无需复杂自定义CSS：

修改步骤 #

1. 调整body布局类
   给<body>添加Bootstrap的flex布局类，让页面成为垂直弹性容器，确保Footer始终在底部，内容区域自动占据剩余空间：

   <body class="min-vh-100 d-flex flex-column">
   

2. 重构404内容容器
   移除原来#error-message的绝对定位CSS，改用Bootstrap flex类实现居中，同时让它占据除Footer外的全部可用空间：

   <div class="container flex-grow-1 d-flex flex-column justify-content-center align-items-center text-center" id="error-message">
       <h2>Oops! Page not Found</h2>
       <h1>404</h1>
       <p>Sorry, we can't find the page you are looking for.</p>
       <p>If you clicked a link on our site and were directed to this page please contact us so we can fix the problem.</p>
       <a href="./index.html">Go back home</a>
   </div>
   

3. 调整Footer定位
   删除#footer的绝对定位CSS，让Footer自然处于页面底部，body的flex布局会自动将其推到底部：

   /* 移除以下代码 */
   #footer {
       position: absolute;
       bottom: 0;
       width: 100%;
   }
   

修改后的完整代码 #

CSS部分 #

/* body {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serrif;
    min-height: 100vh;
} */

/* 移除原#error-message的绝对定位代码 */

footer p {
    padding-top: 8px !important;
}
  
@media screen and (min-width: 768px) and (max-width: 991px) {
    footer h4 {
        min-height: 56px;
    }
}

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404 |  </title>
    <link rel="stylesheet" href="./css/404.css">
    <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/Bootstrap-Technovine/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="min-vh-100 d-flex flex-column">
    <!-- 404 CONTENT START -->
    <div class="container flex-grow-1 d-flex flex-column justify-content-center align-items-center text-center" id="error-message">
        <h2>Oops! Page not Found</h2>
            <h1>404</h1>
            <p>Sorry, we can't find the page you are looking for.</p>
            <p>If you clicked a link on our site and were directed to this page please contact us so we can fix the problem.</p>
            <a href="./index.html">Go back home</a>
    </div>
    <!-- 404 CONTENT CLOSE -->
    <!-- FOOTER SECTION START -->
    <footer class="bg-dark text-white" id="footer">
        <div class="container">
          <div class="row mb-2">
            <div class="col-md-3 mt-5">
              <h4>About Us</h4>
              <hr />
              <p>We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
  
              </p>
              <!-- FACEBOOK SECTION -->
              <a href="">
                <i class="fa-brands fa-facebook fa-2x"></i>
              </a>
  
              <!-- INSTAGRAM SECTION  -->
              <a href="">
                <i class="fa-brands fa-instagram fa-2x"></i>
              
              
              </a>
  
              <!-- TWITTER SECTION -->
              <a href="">
                <i class="fa-brands fa-twitter fa-2x"></i>
                
              <!-- LINKEDIN SECTION -->
              </a>
              <!-- <a href="#">
                <i class="fa-brands fa-linkedin fa-2x"></i>
              </a> -->
  
              <!-- WHATSAPP SECTION -->
              <!-- <a href="#">
                <i class="fa-brands fa-whatsapp fa-2x"></i>
              </a> -->
                
            </div>
            <div class="col-md-3 mt-5">
              <h4>Quick Links</h4>
              <hr />
              <ul class="navbar-nav">
                <li class="nav-item"><a href="/index.html" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
                <li class="nav-item"><a href="/services.html" class="nav-link">Services</a> </li>
                <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a> </li>
              </ul>
            </div>
            
            <div class="col-md-3 mt-5">
              <h4>Privacy and Terms</h4>
              <hr />
              <ul class="navbar-nav">
                <li class="nav-item"><a href="#" class="nav-link">Privacy Policy</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Terms &amp; Coniditions</a></li>
                <li class="nav-item"><a href="#" class="nav-link">API Documentation</a> </li>
              </ul>
            </div>
            <div class="col-md-3 mt-5">
              <h4>Contact Info</h4>
              <hr />
              <p class="text-white">
                city, state 12345 <br />
                Call Us Now 123-456-7890 <br />
                
              </p>
            </div>
          </div>
        </div>
        <div class="bg-dark text-white text-center py-4" id="copyright">
          Copyright &copy; 2023 . All Rights Reserved.
        </div>
      </footer>
      <!-- FOOTER SECTION CLOSE -->
</body>
</html>

原理说明 #

• min-vh-100让body至少占满视口高度
• d-flex flex-column将body设为垂直弹性容器
• flex-grow-1让404内容容器自动填充除Footer外的所有剩余空间
• d-flex flex-column justify-content-center align-items-center实现内容的垂直和水平居中
• 移除绝对定位后，Footer会自然处于页面底部，不会和内容重叠，适配所有屏幕尺寸

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