Bootstrap 5页面home div缩窗时上移问题求助

问题核心：当前home区块用position: fixed定位，会脱离文档流，当浏览器窗口缩小、页面出现滚动时，该定位基于视口的50%计算，忽略了顶部导航栏的高度，导致视觉上跑到页面顶部；同时footer用position: absolute但未给父元素设置相对定位，无法稳定固定在底部。

修复方案 #

利用Bootstrap 5的flex布局工具类，配合少量自定义CSS实现需求：

1. 页面整体布局设置：给body设置min-height: 100vh和垂直flex布局，让内容区自动填充剩余空间，footer自然被推到底部。
2. Home区块居中：移除fixed定位，用flex布局实现垂直水平居中，同时避开导航栏高度。
3. Footer固定：通过flex布局让footer固定在页面底部，避免遮挡内容。

修改后的完整代码 #

CSS部分

:root {
  --primary-color: #f8f9fa;
  --font-color: #212529;
}

.navbar {
    background-color: var(--primary-color);
    border-top: 2px solid #5f8dd3;
    padding-top: 30px;
    font-weight: bold;
}

/* 移除fixed定位，改用flex居中 */
.home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px); /* 减去navbar和footer的高度，避免被遮挡 */
}

.logo {
    height: 200px;
    width: 200px;
    border: 5px solid #5f8dd3;
    border-radius: 100%;
}

.text h1, .text h6 {
    color: var(--font-color);
    text-transform: uppercase;
    text-align: center;
}

/* 调整footer样式，避免内容穿透 */
footer {
    height: 55px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--font-color);
    background-color: #fff;
}

HTML部分

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<body class="d-flex flex-column min-vh-100">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 内容区自动填充剩余空间 -->
  <main class="flex-grow-1">
    <div class="container">
      <div class="row">
        <div class="home w-100">
          <img class="logo d-block mx-auto mb-4" src="https://duckduckgo.com/assets/common/dax-logo.svg" alt="LOGO">
           <div class="text">
              <h1>TEST</h1>
              <h6>BLABLABLABLABLA</h6>
           </div>
          </div>
      </div>
   </div>
  </main>

  <!-- Footer固定在底部 -->
  <div class="container">
    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 border-top">
      <p class="col-md-4 mb-0 text-muted">&copy; 2021 Company, Inc</p>

      <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
      </a>

      <ul class="nav col-md-4 justify-content-end">
        <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
      </ul>
    </footer>
  </div>
</body>

关键说明 #

• body.d-flex.flex-column.min-vh-100：让页面整体占满视口高度，垂直排列子元素。
• main.flex-grow-1：让内容区自动填充navbar和footer之外的剩余空间，确保footer被推到底部。
• .home的min-height: calc(100vh - 120px)：手动减去navbar和footer的总高度，保证home区块在可视区域内居中，不会被导航栏或footer遮挡。
• 移除fixed和absolute定位，避免脱离文档流带来的布局错位问题。

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