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

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


当前回答

下面是如何从官方页面实现这个功能:

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

我刚刚测试了一下,它工作得很好!:)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

相关的CSS代码如下:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

其他回答

另一种可能的解决方案是使用媒体查询

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

你可以使用jQuery来处理这个问题:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

使用Bootstrap 4中内置的flex实用程序! 以下是我使用Bootstrap 4工具得到的结果。

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

.d-flex使主div成为一个伸缩容器 .flex-column在主div来安排你的flex项目在一个列 min-height: 100vh到主div,可以使用style属性,也可以在CSS中,垂直填充视口 元素上的.flex-grow-1,让主内容容器占用视口高度中剩余的所有空间。

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/。

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

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

增加身体

  { padding-bottom: 70px; }