我通常熟悉使用css刷新页脚的技术。

但是我在将这种方法用于Twitter引导时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter引导,我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。


当前回答

Bootstrap v4+溶液

这里有一个解决方案,不需要重新考虑HTML结构或任何涉及填充的额外CSS技巧:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

请注意,此解决方案允许页脚具有灵活的高度,这在为多个屏幕尺寸设计页面时特别有用,在收缩时使用内容包装。

为什么会这样

style="height:100%;" makes the <html> tag take the whole space of the document. class d-flex sets display:flex to our <body> tag. class flex-column sets flex-direction:column to our <body> tag. Its children (<header>, <main>, <footer> and any other direct child) are now aligned vertically. class h-100 sets height:100% to our <body> tag, meaning it will cover the entire screen vertically. class flex-grow-1 sets flex-grow:1 to our <main>, effectively instructing it to fill any remaining vertical space, thus amounting to the 100% vertical height we set before on our <body> tag.

工作演示在这里:https://codepen.io/maxencemaire/pen/VwvyRQB

有关flexbox的更多信息,请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

其他回答

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;
}

在这里,你会发现HAML (http://haml.info)的方法,导航栏在顶部,页脚在页面底部:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

使用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 -链接

使用下面的类将它推到页面的最后一行,也使它到页面的中心。 如果你正在使用ruby on rails HAML页面,你可以使用下面的代码。 % footer.card.text-center

请不要忘记使用twitter bootstrapp

它看起来像高度:100%的“链”被打破在div#main。试着增加高度:100%增加高度,这可能会让你更接近目标。