使用Bootstrap 5保持页脚在底部

    <div class="min-vh-100 d-flex flex-column 
                justify-content-between">
     
         <div> <!-- Wrapper (Without footer) -->
       
            <header>
             I am a header.
            </header>
      
            <article>
            I am an article!
            </article>
       
        </div> <!-- End: Wrapper (Without footer) -->
     
     
         <footer>
         I am a footer.
         </footer>
     
    </div>

在CodePen中的现场演示

Note

请确保您使用以下引导类将所有内容包装在<div>或任何其他块级元素中:min-vh-100, d-flex,flex-column,justify-content-between。 确保在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。 确保您使用<footer>或任何其他块级元素来包装页脚。

代码的解释

Min-vh-100确保body元素至少延伸到屏幕的全部高度 Flex-column在保留堆叠块元素方面保持正常文档流的行为(假设主体的直接子元素确实都是块元素)。 Justify-content-between将页脚推到屏幕底部。

看看如何做同样的(保持页脚在底部)与CSS -链接

bootstrap是这样做的:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

只需使用页面源代码，您就应该能够看到。不要忘记<div id="wrap">在顶部。

对于Sticky Footer，我们在HTML中使用了两个DIV来实现基本的Sticky Footer效果。这样写:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

使用这段代码在引导它的工作

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

HTML

<div id="wrapper">

  <div id="content">
    <!-- navbar and containers here -->
  </div>

  <div id="footer">
   <!-- your footer here -->
  </div>

</div>

CSS

html, body {
  height: 100%;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

#content {
  padding-bottom: 100px; /* Height of the footer element */
}

#footer {
  width: 100%;
  height: 100px; /* Adjust to the footer needs */
  position: absolute;
  bottom: 0;
  left: 0;
}

使用navbar组件并添加.navbar-fixed-bottom类:

<div class="navbar navbar-fixed-bottom"></div>

增加身体

  { padding-bottom: 70px; }