Bootstrap模板粘性页脚失效：长页面下页脚无法随内容下移

问题描述 #

使用Bootstrap页脚模板时，短页面显示正常，但页面内容超过一页时，页脚停留在原位置，无法移动到内容下方。需要实现：短页面时页脚固定在页面底部，长页面时页脚跟随内容末尾。

问题原因 #

你的代码已正确使用Bootstrap弹性布局结构（body上的d-flex flex-column min-vh-100和main上的flex-fill），但**.bg-strech类设置了固定的height:90vh**，这会强制main内部容器高度固定为视口的90%，当内容超过这个高度时会被截断，导致页脚无法被内容“推”到页面末尾。

另外，固定导航栏（fixed-top）会遮挡页面顶部内容，需要给main添加顶部内边距来避免这个问题。

解决方案 #

1. 移除.bg-strech的固定高度：删除CSS中.bg-strech的height:90vh，让内容自然撑开main的高度。
2. 添加顶部内边距避免导航遮挡：给main添加pt-5类，或者在自定义CSS中设置padding-top: 70px;（根据导航高度调整）。
3. 保留页脚的mt-auto类：确保短页面时页脚能自动推到页面底部。

修改后的代码示例 #

调整后的CSS #

/* 移除.bg-strech的height:90vh */
.bg-strech {
  /* 移除height:90vh */
}

/* 新增：给main添加顶部内边距，适配固定导航 */
main.flex-fill {
  padding-top: 70px;
}

/* 其他CSS保持不变 */
.dropdown-toggle::after {
  display: none;
}

.text-decoration-none {
  text-decoration: none!important;
}

.icon-width {
  width: 2rem;
}

nav .active a {
  color: black;
  font-weight: 600;
}

nav {
  font-weight: bree, sans-serif;
}

.bg-world {
  background-image: url('../img/bg-1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 90vh;
}

.padding {
  padding: 10rem;
}

.box-land {
  background: rgb(245, 245, 245);
  background: linear-gradient(143deg, rgba(245, 245, 245, 0.8547794117647058) 49%, rgba(203, 186, 186, 1) 100%);
  border-radius: 20px;
  border: 3px solid black;
  padding: 1rem;
}

.box-land h2 {
  margin-bottom: 2rem;
}

.box-land img {
  width: 100%;
  margin-bottom: 1rem
}

.footer {
  height: 3rem;
}

@media screen and (max-width: 1000px) {
  .footer {
    display: none !important;
  }
}

.footer img {
  height: 2rem;
  width: auto;
  margin-left: 100%;
  margin-right: 0;
}

.footer .copyright {
  margin-top: 0.25rem;
  margin-left: 1rem;
}

.bd-placeholder-img {
  background-image: url("../img/bg-1.png");
}

.card-img-info {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

调整后的HTML（main部分） #

<main class="flex-fill pt-5">
  <div class="text-center text-blue bg-strech">
    <div class="container py-5 align-items-center">
      <div class="row justify-content-center h-90  flex-grow-1">
        <div class="card p-3 mb-4">
          <figure class="p-3 mb-0">
            <blockquote class="blockquote">
              <p>Dit idee is ontstaan omdat ik interesse begon te krijgen in staatkunde en de administratieve onderverdeling van België. Ik zocht een kaart waar alle gemeenten opstonden met hun subdivisies, maar ik vond geen makkelijk toegankelijke kaart, daarom ben ik op pad gegaan om zo'n kaart te maken met mijn kennis van grafisch ontwerpen en coderen. Het nut van de website is dat alle geïnteresseerden op één plaats terecht komen waar alles te vinden is. Dit is zowel voor oud als jong. Zo kunnen mensen ook meer bewust worden van hun omgeving en land.</p>
              <p>Ik kan dit natuurlijk niet alleen daarom zoek ik contact op met elke gemeente in België om info te vragen over hun gemeenten zoals: wat is de onderverdeling, waar liggen de grenzen, etc... Van veel gemeenten heb ik feedback gekregen en dit helpt het proces te versnellen om het project af te werken. Ik doe dit alleen en op eigen initiatief daarom ben ik dankbaar voor alle mensen de mij willen sponseren en steunen in dit avontuur. Dank aan jullie allemaal.</p>
            </blockquote>
            <figcaption class="blockquote-footer mb-0 text-muted">
              Achilles Gossaert (16) uit Roeselare
            </figcaption>
          </figure>
        </div>
      </div>
    </div>
  </div>
</main>

说明 #

• 移除固定高度后，main会根据内容自动调整高度，页脚会随着内容的末尾自然下移。
• pt-5类（或者自定义的padding-top）确保页面顶部内容不会被固定导航栏遮挡，数值可以根据你的导航实际高度调整。
• 保留body的d-flex flex-column min-vh-100和footer的mt-auto，确保短页面时页脚仍能固定在视口底部。

内容的提问来源于stack exchange，提问作者W. Devlieger