将页脚冲洗至页面底部，Twitter引导程序

306

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

但是我很难让这种方法适用于Twitter引导程序，这很可能是因为Twitter引导程序本质上是响应式的。使用Twitter引导程序，我无法使用上述博客文章中描述的方法使页脚刷新至页面底部。

css  twitter-bootstrap  footer 
— 郑浩文
source
在测试下面的所有答案之前，请记住OP希望它与twitter bootstrap一起使用。由于不是必须的，twitter bootstrap与Jquery一起使用，这意味着它已启用Javascript。因此，请测试我的答案：stackoverflow.com / questions / 10099422 /…
— HenryW 2014年
4
— 用户
1
链接坏了！任何人都可以修复官方示例链接吗？
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar由于我猜想它将来可能会成为旧版本，因为4.0。
— 21:48

Answers:

323

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

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;
}
— 川永
source
到目前为止，这是我尝试过的最佳解决方案。接受这个作为答案。
— Calvin Cheng
嗨，我已经实现了这种方法，效果很好，但是现在我在iphone上显示页面时遇到了一些问题（页面被放大了）。任何想法是什么问题？下面是一些细节：stackoverflow.com/questions/18621090/...
— pupadupa
94
万一您已阅读此答案但没有向下滚动，则值得看看其他答案
— MattyW 2013年
4
特别是具有这一个：stackoverflow.com/questions/10099422/...
— HenryW
1
这是我为Bootstrap找到的最佳方法。为了提高设备的响应速度，请记住使用媒体查询来更新#main和.footer高度以适应不同的屏幕尺寸
— SyntaxGoonoo 2014年
466

现在，它包含在Bootstrap 2.2.1中。

Bootstrap 3.x

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

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

Bootstrap 4.x

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

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

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

— 萨农
source
35
@ChuanYeong不幸的是没有navbar-static-bottom。
— 劳伦斯·伍德曼
25
@MikeCurry他没有询问固定页脚，而是询问“填充”空白区域的页脚，如果您的页面内容不足以使页脚停留在底部。如果您的页脚仅供参考，那么固定的页脚仅占用宝贵的空间。
— rdlu 2013年
22
这不是粘性页脚，因为它用于position：fixed; 这不对
— Furkat U.
9
是的，此解决方案仅刷新到视口的底部，而不是页面的底部。即页脚始终可见。
— rism
3
不得不拒绝答案，因为它会使人困惑。OP不想让页脚发粘。
— HenryW 2014年
77

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>

如果用户打开devtools或调整窗口大小，该版本将始终更新。

<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即可
。如果内容不适合屏幕，则会显示滚动条。

— 亨利·W
source
9
是的，我也一起去了。CSS有时可能是如此愚蠢。并非不可能，但是通用解决方案可能很难实现，并且在我们的布局中修复此类烦人的内容时，不应浪费时间进行堆栈交换，多次修改，跨浏览器测试以及最终投降到简单的JS特技。是的，我有点脏，但至少可以用。
— meecect
3
我看过的每个解决方案都是错误的。这是唯一实际应做的工作-将页脚粘贴到页面底部，如果调整了浏览器的大小，则不会遮挡任何内容。
— 戴夫
13
它并没有像我期望的那样安静，仍然是更好的答案之一，我通过替换$('#footer').height();为“ $('#footer').outerHeight();
— DarkMukke”
3
好答案！我进行了一些修改，我认为可以在此处进行改进：stackoverflow.com/a/36385654/8207
— Cory
6
我找到的最佳答案。如果您希望它在窗口调整大小后起作用，只需将答案中的主要代码放入其中，$(window).resize(function() {//main code goes here});并$(window).resize();在页面加载时调用以对其进行设置。
— SzymonSadło，2016年
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;
    }
}
— 列尼尔·马卡费里
source
7
感谢您发布此内容，它绝对是我特定项目的最佳解决方案（更不用说唯一可行的解​​决方案了），当然很好的是它直接来自项目本身。
— 科里W.
1
我不知道这笔交易是什么，但如果不向页面中添加滚动条，就无法使它正常工作。我最终更改了.wrapper CSS，因此最小高度为“ calc（100％-120px）”，其中120px是我的页脚高度，并从html中删除了<div id =“ push”> </ div>因为除了增加我不需要的页面高度外，它似乎没有任何作用。
— jammyman34'3
36

对于粘性页脚，我们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;
}
— 桑迪普
source
7
他说他正在使用Twitter Bootstrap。在不完全重写HTML的情况下将其集成到Bootstrap的最简单方法是什么？
— 科迪·格雷
1
如果OP想为实现置顶页脚的效果那么他必须改变他的标记
— 桑迪普
谢谢！这是在使用Bootstrap的ASP.NET MVC5站点中对我真正起作用的唯一方法。+1
— Yann Duran 2014年
19

好吧，我发现了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

— 马克西姆·肖斯汀
source
2
最简单，最优雅的解决方案。提防在家中编写自己的CSS代码，因为它不会与Bootstrap向后兼容
— 1-14x0r 2013年
我用了它，并且在一个旧的android（页面可能比屏幕短）上遇到了问题（也许是吗？）。否则，它运作良好的FF，铬，IE11，iPhone，Nexus 7备用
— bnieland
完美而极其简单！
— ramires.cabral
18

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

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

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

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

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

— 穆罕默德·阿里·贾马维
source
1
这仍然适用于正式发布的4版本。
— klewis18年
请注意，getbootstrap.com / docs / 4.1 / examples / sticky -footer上的示例在footer元素上具有line-height = 60px样式。这不仅是不必要的，而且如果页脚是一个或多个div元素的父级，通常也会导致页脚无法正常工作。
— ScottyB
13

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;
});
— 科里
source
11

这非常适合我。

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

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

我这样使用它：

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

并在整个宽度上设置为最低。

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

— sp_omer
source
10

您需要包装.container-fluiddiv才能使粘性页脚正常工作，并且在.wrapper类上还缺少一些属性。尝试这个：

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

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

我们之所以必须这样做，是因为body向下推以容纳导航栏最终会将页脚向视口的位置再推（更远70像素），从而得到一个滚动条。我们.container-fluid改用div 可以获得更好的结果。

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

<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;
   }
}
— 安德烈斯·伊里奇（Andres Ilich）
source
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>
— 雷吉斯B.
source
9

使用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（具有style属性或在CSS中）以垂直填充视口
  • .flex-grow-1 在容器上，使主要内容容器占据的元素将占据视口高度中的所有空间。
— EGhost57
source
而不是 min-height: 100vh在min-vh-100从Bootstrap类都可以使用。
— ikonuk
该解决方案效果很好，包括@ikonuk提出的min-vh-100建议
— TGR
4

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

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

加体 

  { padding-bottom: 70px; }
— 管理员档案3
source
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;
    }
— 1-14x0r
source
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();
    });
});
— 德勤
source
2

唯一为我工作的人！：

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
— 里卡多
source
2

最简单的技术可能是navbar-static-bottom结合使用Bootstrap 和将主容器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>
— 潘望佩龙
source
2

经过测试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;
}
— 杜尚·玛ď（DušanMaďar）
source
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;
}

页脚高度与wrap元素的底部凹痕的大小匹配。

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
— 夏普512
source
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;
}

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

— 汤姆·T
source
1

按照Bootstrap 4.3示例，如果您像我一样失去理智，这实际上是这样的：

  • 页脚div的所有父母都需要拥有height: 100%（h-100班级）
  • 页脚的直接父级必须具有display: flex（d-flexclass）
  • 页脚需要有margin-top: auto（mt-auto类）

问题在于，在现代的前端框架中，我们经常围绕这些元素使用其他包装。

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

因此，要使其工作，我必须向这些包装器元素中添加类：一个附加类h-100，d-flex向下移动mt-auto一个级别，然后从页脚向上移动一个级别（因此实际上不再在页脚类上，而是在我的<app-footer>自定义上元件）。

— 值类型
source
我只好把class="h-100"到<html>标签了。
— 凯尔·索拉尔
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>
— 桑杰
source
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%;"使<html>标签占据整个文档空间。
  • 类d-flex设置display:flex为我们的<body>标签。
  • 类flex-column设置flex-direction:column为我们的<body>标签。其子（<header>，<main>，<footer>和任何其他直接孩子）现在垂直对齐。
  • class h-100设置height:100%为我们的<body>标签，这意味着它将垂直覆盖整个屏幕。
  • class flex-grow-1设置flex-grow:1为我们的<main>，有效地指示它填充任何剩余的垂直空间，因此等于我们之前在<body>标签上设置的100％垂直高度。

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

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

— th陀罗
source
h-100类无法正常工作，最好使用min-vh-100。
— ikonuk
@ikonuk“无法正常工作”到底是什么意思？请详细说明。
— Kathandrax
由于h-100类始终取决于父元素的高度，因此在某些情况下可能无法正常工作。由于我们希望页脚位于视口的底部，因此最好使用视口高度。
— ikonuk
同样，定义“某些情况”。您关于父项依赖项的论点也适用于min-width。这就是为什么HTML标签有height100％的代码。该示例有效，但我不明白为什么它不对CSS height属性提供跨浏览器的支持，而CSS 属性最终就是Bootstrap片段所转换的。
— Kathandrax
我不是说您的榜样行不通。并非所有人都使用HTML标记中的样式。就我而言，您的解决方案无法正常工作，因为我不喜欢使用HTML标记中的样式。而且我不希望body标签依赖于另一个父元素而是视口。你不必把style="height:100%;"和h-100在同一时间。把min-vh-100对身体根本没有工作和更少的代码。
— ikonuk
0

看来height:100%“链”已被打破div#main。尝试添加height:100%它，可能会使您更接近目标。

— 911
source
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
— 汉尼斯
source
您能否详细说明您的答案？通常不建议仅使用代码的答案。
— Qix-蒙尼卡（Monica）
1
好吧，你想知道什么？
— 汉尼斯2014年
我不需要知道它，但是以后访问此站点的人可能不知道确切的答案代码为什么会这样做。
— Qix-蒙尼卡（Monica）错误
可能我应该删除它。我写了一个新的介绍。：）
— 汉尼斯2014年
0

把事情简单化。

footer {
  bottom: 0;
  position: absolute;
}

您可能还需要通过向脚添加margin-bottom等效于页脚高度的方式来抵消页脚的高度body。

— Obfk
source
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>

小提琴

— 胜利者
source
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;
    }
}
— 乔治·WL
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.