333

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

但是我在让这种方法适用于 Twitter 引导程序时遇到了一些麻烦，这很可能是因为 Twitter 引导程序本质上是响应式的。使用 Twitter 引导程序，我无法使用上述博客文章中描述的方法将页脚刷新到页面底部。

4

35 回答 35

502

这现在包含在 Bootstrap 2.2.1 中。

引导程序 3.x

使用导航栏组件并添加.navbar-fixed-bottom类：

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

引导程序 4.x

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

不要忘记添加body { padding-bottom: 70px; }，否则可能会覆盖页面内容。

文档： http: //getbootstrap.com/components/#navbar-fixed-bottom

于 2012-11-13T17:26:36.723 回答
330

发现这里的片段非常适合引导程序

html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS：

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}
于 2012-10-03T02:13:52.057 回答
85

Twitter bootstrap NOT STICKY FOOTER的工作示例

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

在用户打开开发工具或调整窗口大小时始终更新的版本。

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

你至少需要一个元素#footer

如果内容适合屏幕不想要滚动条，只需将值 10 更改为 0
如果内容不适合屏幕，滚动条将显示。

于 2014-01-07T12:17:27.487 回答
38

对于粘性页脚DIV's，我们在 HTML 中使用两个来实现基本的粘性页脚效果。像这样写：

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
于 2012-04-11T03:39:27.093 回答
36

以下是从官方页面实现此功能的方法：

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;
    }
}
于 2013-01-30T02:18:20.320 回答
32

更简单的官方示例： http: //getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
于 2015-02-25T07:18:44.883 回答
28

在最新版本的 bootstrap 4.3 中，这可以使用.fixed-bottomclass 来完成。 

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

这是我在页脚中使用它的方法：

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

您可以在此处的职位文档中找到更多信息。

于 2017-09-10T18:32:18.977 回答
27

使用 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 容器
  • .flex-column在主 div 上将您的弹性项目排列在一个列中
  • min-height: 100vh到主 div，无论是使用样式属性还是在您的 CSS 中，以垂直填充视口
  • .flex-grow-1在容器上，元素让主内容容器占据视口高度中剩余的所有空间。
于 2019-05-25T19:35:49.880 回答
22

好吧，我发现了navbar-inner和 navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

看起来不错，对我有用

在此处输入图像描述

参见示例Fiddle

于 2013-04-21T20:17:17.387 回答
15

HenryW 的回答很好，尽管我需要进行一些调整才能使其按我的意愿工作。特别是以下还处理：

  • 通过首先在 javascript 中标记为不可见并设置为可见来避免页面加载时的“跳跃”
  • 处理浏览器优雅地调整大小
  • 如果浏览器变小并且页脚变得大于页面，则另外设置页脚备份页面
  • 高度函数调整

这些调整对我有用：

HTML：

<div id="footer" class="invisible">My sweet footer</div>

CSS：

#footer {
    padding-bottom: 30px;
}

JavaScript：

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});
于 2016-04-03T12:53:27.837 回答
12

这对我来说非常有效。

将此类 navbar-fixed-bottom 添加到您的页脚。

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

我这样使用它：

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

它设置在整个宽度的底部。

编辑：这会将页脚设置为始终可见，这是您需要考虑的事情。

于 2016-11-16T14:34:57.053 回答
10

您需要包装您的.container-fluiddiv 以使您的粘性页脚工作，您还缺少.wrapper类上的一些属性。试试这个：

padding-top:70px从您的body标签中删除并将其包含在您的标签中.container-fluid，如下所示：

.wrapper > .container-fluid {
    padding-top: 70px;
}

我们必须这样做，因为body向下推以适应导航栏最终会将页脚推得更远（70px）超过视口，所以我们得到一个滚动条。我们会得到更好的结果，而不是推动.container-fluiddiv。

接下来，我们必须删除div.wrapper外部的类.container-fluid并用它包装#maindiv，如下所示：

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

您的页脚当然必须在.wrapperdiv 之外，因此将其从 `.wrapper div 中删除并将其放在外面，如下所示：

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

.wrapper完成后，通过使用负边距正确地将页脚推到更靠近班级的位置，如下所示：

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

这应该可以工作，尽管您可能必须修改其他一些东西才能在调整屏幕大小时使其工作，例如重置.wrapper类的高度，如下所示：

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}
于 2012-04-11T14:17:21.893 回答
9

这是使用 Twitter Bootstrap 和新的 navbar-fixed-bottom 类的正确方法：（你不知道我花了多长时间寻找这个）

CSS：

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML：

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
于 2013-02-06T18:09:18.157 回答
8

使用 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 中的现场演示

笔记

  • 确保您<div>使用以下 Bootstrap 类将所有内容包装在一个或任何其他块级元素中min-vh-100, d-flex,flex-column,justify-content-between ：

  • 确保将除页脚元素之外的所有内容都包装在 a<div>或任何其他块级元素中。

  • 确保您使用<footer>或任何其他块级元素来包装页脚。

代码说明

  • min-vh-100确保 body 元素将至少伸展到屏幕的整个高度

  • flex-column在保留堆叠的块元素方面保持正常文档流的行为（假设正文的直接子元素实际上都是块元素）。

  • justify-content-between将页脚推到屏幕底部。

查看如何仅使用 CSS 执行相同操作（将页脚保持在底部） -链接

于 2021-08-18T17:24:16.057 回答
4

使用导航栏组件并添加 .navbar-fixed-bottom 类：

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

添加正文

  { padding-bottom: 70px; }
于 2016-02-23T08:47:34.133 回答
4

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%;"使<html>标签占据文档的整个空间。
  • 类d-flex设置display:flex为我们的<body>标签。
  • 类flex-column设置flex-direction:column为我们的<body>标签。它的孩子（<header>,<main>和<footer>任何其他直接孩子）现在垂直对齐。
  • classh-100设置height:100%为我们的<body>标签，这意味着它将垂直覆盖整个屏幕。
  • classflex-grow-1设置flex-grow:1为 our <main>，有效地指示它填充任何剩余的垂直空间，从而达到我们之前在<body>标签上设置的 100% 垂直高度。

工作演示：https ://codepen.io/maxencemaire/pen/VwvyRQB

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

于 2020-05-05T21:25:26.670 回答
3

要处理宽度约束布局，请使用以下内容，这样您就不会得到圆角，并且您的导航栏将与应用程序的两侧齐平

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

然后您可以使用 css 覆盖引导类来调整高度、字体和颜色

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }
于 2013-08-15T19:50:10.030 回答
3

您可以使用 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();
    });
});
于 2014-06-18T06:32:04.723 回答
3

最简单的技术可能是将 Bootstrapnavbar-static-bottom与设置主容器 div 结合使用height: 100vh（新的 CSS3视图端口百分比）。这会将页脚刷新到底部。

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>
于 2015-06-29T20:19:58.043 回答
3

经测试Bootstrap 3.6.6。

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}
于 2017-07-08T16:09:34.113 回答
2

唯一对我有用的！：

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
于 2015-04-17T20:38:10.573 回答
2

根据Bootstrap 4.3 示例，如果您像我一样失去理智，这就是它的实际工作方式：

  • 页脚 div 的所有父母都需要有height: 100%(h-100类)
  • 页脚的直接父级需要有display: flex（d-flex类）
  • 页脚需要有margin-top: auto（mt-auto类）

问题在于，在现代前端框架中，我们经常在这些元素周围有额外的包装器。

例如，在我的例子中，使用 Angular，我从一个单独的应用程序根、主应用程序组件和页脚组件组成了视图——所有这些都将它们的自定义元素添加到 DOM。

所以，为了让它工作，我必须向这些包装元素添加类：一个附加h-100的，d-flex向下移动一层，并从页脚向上移动mt-auto一层（所以实际上它不再在页脚类上，而是在我的<app-footer>自定义元素）。

于 2019-07-20T00:10:33.317 回答
1 
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

页脚高度与换行元素底部缩进的大小相匹配。

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
于 2013-07-20T11:49:47.823 回答
1

把事情简单化。

footer {
  bottom: 0;
  position: absolute;
}

您可能还需要通过将margin-bottom与页脚高度等效的值添加到body.

于 2014-01-12T01:09:42.760 回答
1

这是使用 Flexbox 的最新版 Bootstrap（撰写本文时为 4.3）的解决方案。

HTML：

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS：

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

还有一个 codepen 示例：https ://codepen.io/tillytoby/pen/QPdomR

于 2019-04-10T02:32:25.017 回答
1

在引导程序中使用这段代码它的作品

<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>
于 2020-04-20T10:25:23.207 回答
0

看起来height:100%“链条”正在被打破div#main。尝试添加height:100%它，这可能会让你更接近你的目标。

于 2012-04-11T07:55:37.440 回答
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
于 2012-12-02T22:59:52.250 回答
0

这是一个使用 css3 的示例：

CSS：

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML：

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

小提琴

于 2014-10-10T17:41:21.100 回答
0

这就是引导程序的做法：

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

只需使用页面源，您应该可以看到。不要忘记<div id="wrap">顶部。

于 2015-01-05T23:16:52.023 回答
0

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

@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;
    }
}
于 2016-05-09T10:59:01.843 回答
0

使用下面的类将其推送到页面的最后一行并使其居中。如果您在 Rails HAML 页面上使用 ruby​​，您可以使用以下代码。 %footer.card.text-center

请不要忘记使用 twitter bootstrap

于 2018-05-28T11:36:51.427 回答
0

这很好用

html

<footer></footer>

css

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
于 2020-02-16T15:43:48.610 回答
-1

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;
}
于 2019-09-25T10:40:42.143 回答
-1

这个是最好的！

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
于 2019-10-15T05:33:36.650 回答