Twitter Bootstrap 3粘性页脚

204

我已经使用twitter bootstrap框架已有相当长的一段时间了，并且它们最近已更新到版本3！

我在使粘性页脚停留在底部时遇到了麻烦，我使用了twitter bootstrap网站提供的启动程序模板，但还是没有运气，有什么想法吗？

html  css  twitter-bootstrap  twitter-bootstrap-3 
— 布拉德·弗莱彻
source
31
— ptim
3
@memeLab为什么官方示例没有关于底边的任何内容：-60px？还是我想念...？
— ganders 2014年
添加了仅CSS的解决方案，允许为脚注添加可变高度。作为新答案，将其链接在这里，位于页面底部。
— tao

Answers:

193

只需将类navbar-fixed-bottom添加到您的页脚中即可。

<div class="footer navbar-fixed-bottom">
— 乔恩
source
32
这与粘性页脚不同
— Yura Omelchuk 2014年
3
如果您有页眉和页脚，则会浪费移动设备上的太多空间。
— 斯特拉顿
4
@strattonn就是媒体查询的对象
— Jacob Raccuia 2014年
20
如果页面不需要滚动，则可以完美地工作。但是页脚与页面上的更多内容重叠。任何解决方法？谢谢！
— Xplora 2015年
1
不确定重叠问题，但是添加边距/填充不能解决问题吗？
— 2015年
152

参考官方的Boostrap3粘性页脚示例，无需添加<div id="push"></div>，并且CSS更简单。

官方示例中使用的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;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

和基本的HTML：

<body>

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

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>

您可以在sticky-footer示例的源代码中找到此CSS的链接。

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

完整网址：http : //getbootstrap.com/examples/sticky-footer/sticky-footer.css

— Tkymtk
source
21
现在，官方粘性页脚示例中的HTML和CSS与此处描述的内容大不相同，例如，不再使用“ wrap” div。
— IanB
52

这是一种将添加一个粘贴页脚的方法，该粘贴页脚除了Bootstrap中已经存在的内容外不需要任何其他CSS或Javascript，并且不会干扰您当前的页脚。

此处的示例： Easy Sticky Footer

只需将其直接复制并粘贴到您的代码中即可。没有大惊小怪。

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
— 不孕症
source
4
非常好，快捷。也可以响应。但是需要在页面内容的底部添加一些额外的空间，以便页脚不会将其隐藏。该空间的高度应等于页脚高度。您能展示如何做到最好吗？BTW “不需要任何CSS”在技​​术上是错误的。应该是“除了Bootstrap类之外，不需要任何其他CSS”。
— ADTC
1
我喜欢这可以利用引导程序中现有的功能。我无法获得其他最有效的答案，而是将其粘贴到我的页面中，然后粘贴，粘贴页脚。谢谢！
— haakon.io
34

除了刚刚添加的CSS外，请记住您需要在关闭wrap div之前添加push div

HTML的基本结构是 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

实时取景
编辑取景

— 戴维·泰阿罗阿（David Taiaroa）
source
如果页面内容大于可用显示，则页脚将被下推。我希望页脚真正固定在底部（例如navbar-fixed-bottom）
— blueFast，2016年
嘿@delavnog，这种方法对您有用吗？codepen.io/panchroma/pen/wMXWpY。对您来说，唯一重要的一点是第647行的HTML和CSS
— David Taiaroa，2016年
@delavnog，同样的想法与页面内容最小codepen.io/panchroma/pen/JGZKqy
— 大卫Taiaroa
谢谢，太好了！现在，如果我可以使主div垂直居中于导航栏和页脚之间，那就太棒了！编辑了您的codepen：codepen.io/anon/pen/rxKMaW（我必须在身体上增加一个边距，因为导航正在吞噬内容的顶部）
— blueFast 2016年
@delavnog，如果主体不太高，这是一个开始。对于更长的内容，这将需要更多的工作：codepen.io/panchroma/pen/vLrXMq
— David Taiaroa，
30

这是到目前为止的Sticky Footer简化代码，因为他们一直在对其进行优化，这是很好的：

的HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

的CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
— 列尼尔·马卡费里
source
1
完美的解决方案。那就是我想要的。
— Levimatt
1
不幸的是，此页脚的大小已固定。有时，当页脚是动态的时，它可以大于或小于CSS中的高度。
— 23W
27

我在这个主题上有点晚了，但是我碰到了这个帖子，因为我被这个问题咬了一下，终于找到了一种非常简单的方法来解决它，只需navbar在navbar-fixed-bottom启用类的情况下使用即可。例如：

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

高温超导

— 伊米尔
source
我喜欢您答案的简单性和有效性，顺便说一下，这是一个明智的答案。相同问题的许多答案都充满了jQuery和复杂的东西。谢啦。
— digitai 2014年
1
作为解决方案的一半，如果您调整页面内容的大小，仍然需要注意页面内容的重叠。
— Baldráni
@Baldráni没有完整的解决方案，如果您在页脚html中使用Bootstrap行和col，重叠工作会很好（无论如何，您都应该这样做）
— Tino Mclaren 2015年
这不是粘性页脚。这是一个固定的底部导航栏，仅适用于导航栏内容，并且与页面内容重叠。
— Zim
10

这是我针对此问题的更新解决方案。 

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

并像这样使用它： 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

要么 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
— e
source
4
这不是一个好的解决方案，因为页脚是固定的，这意味着页脚与页面内容（如果有）重叠。尝试some text<br>在页脚之前添加几行，并缩小窗口的大小。
— jmarceli 2014年
@ user2041318：是的，这太可怕了...感谢您指出这一点。
— 塞巴斯蒂安2015年
根据jmarceli注释，此问题已得到纠正。页脚不再固定。
— zee
3

粘性示例对我不起作用。我的解决方案：

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— 安迪·吉加（Andi Giga）
source
简单，老式的CSS。任务完成。我觉得这很有趣，其中一些答案较高的答案令人费解。Bootstrap是否应该使我们的生活更轻松？😂
— 卡尔
2

推送div应该紧接在wrap，而不是之后。 

<div id="wrap">
  *content goes here*
</div>

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

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
— 约瑟夫
source
2

OP回答：

将此添加到您的CSS文件。

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

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

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

我想要一个灵活的粘性页脚，所以才来到这里。最佳答案使我朝着正确的方向前进。

当前（2016年10月2日）Bootstrap 3 CSS粘性页脚（固定大小）如下所示：

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

只要页脚的尺寸固定，身体底部的边缘就会产生推动力，以允许页脚可以放入口袋。在这种情况下，两者均设置为60px。但是，如果页脚不固定并且超过60像素高度，它将覆盖您的页面内容。

灵活：删除CSS的正文边距和页脚高度。然后添加JavaScript以获取页脚高度并设置主体marginBottom。这是通过setfooter（）函数完成的。接下来添加事件侦听器，以了解页面何时首次加载以及如何调整运行setfooter的大小。注意：如果页脚中有手风琴或其他任何会触发尺寸更改的东西，而没有调整窗口大小，则必须再次调用setfooter（）函数。

运行该代码段，然后全屏演示。

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
展开摘要

— 斯特纳
source
2

简单的js

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

更新＃1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
— 硬盘录像机
source
1

总结所有这些，只需记住一件事，即除页脚之外的所有内容都应包含min-height: 100%或更少。

— 克希里什
source
1

我使用LESS编写了带有填充的简化粘性页脚代码。该问题可能与主题无关，因为该问题并未涉及填充，因此，如果您有兴趣，请查看此帖子以获取更多详细信息。

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
— 弗雷德·K
source
1

根据Jek-fdrv的回答，我添加了一个.on('resize', function()以确保它适用于每种设备和每种分辨率：

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
— 亚姆克里斯维克
source
1

引导程序的当前版本似乎不再适用于此功能。如果下载他们的sticky-footer-navbar示例并将大量内容放置在主体区域中，则页脚将被向下推超过视口底部。一点也不粘。

— 加泰罗尼亚CJ
source
1

这是用于完全响应的可变高度粘性页脚的基于CSS的解决方案。
优点：页脚允许可变的高度，因为不再需要在CSS中对高度进行硬编码。

显示代码段

这是无前缀的SCSS（用于gulp/ grunt）：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
— tao
source
1

只需使用flex！确保在HTML中使用body和main，这是最好的解决方案之一（除非需要IE9支持）。它不需要固定的高度或类似的高度。

这也是为Materialise推荐的！

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}
— 肯特
source
0

用Haml＆Sass的话来说，所有必要的事情：

哈姆 app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

萨斯 app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

基于http://getbootstrap.com/examples/sticky-footer-navbar/

— 当量8
source
0

如果要使用引导程序，请在页脚的类中进行构建。您还应该编写一些javascript：

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

它将防止内容与固定页脚重叠，并会调整 padding-bottom在用户更改窗口/屏幕大小时进行。

在上面的脚本中，我假设页脚直接放置在body标签内，如下所示：

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

这绝对不是最好的解决方案（因为可以避免使用JS），但它的工作原理没有任何重叠问题，易于实现和响应（height在CSS中未进行硬编码）。

— 杰马切利
source
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
展开摘要

— Gpak
source
底部的粘性如何？
— 塞巴斯蒂安
0

这是一个非常简单干净的粘性页脚，可以在引导程序中使用。完全响应！

的HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

的CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

示例：CodePen演示

— 哥德伯兹
source
由于绝对定位，在打开引导程序模式时，此解决方案将使页脚栏向右移动！
— thethakuri
0

flexbox从CSS-tricks的人那里发现，使用是最简单的方法。这是真正的粘性页脚，当内容小于页面的100％并且大于页面的100％时起作用：

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

和CSS：

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

请注意，这是与引导无关的，因此它可以在没有引导的情况下使用。

— 布斯塔温
source
0

您可以简单地尝试在页脚导航栏中添加一个类：

navbar-fixed-bottom

然后创建一个名为custom.css的CSS 和这样的主体填充。

body { padding-bottom: 70px; }
— 伊克拉姆-乌德-道拉
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.