Twitter Bootstrap 3 Sticky Footer

我已经使用twitter引导框架很长一段时间了，他们最近更新到版本3!

我有麻烦让粘性页脚粘到底部，我已经使用了twitter bootstrap网站提供的启动器模板，但仍然没有运气，有什么想法吗?

当前回答

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

2016-05-11 10:52:10

其他回答

基于jk -fdrv的回答，我添加了一个.on('resize'，函数()，以确保它在每种设备和每种分辨率上都能工作:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});

2016-04-27 02:01:56

我想要一个灵活的粘性页脚，所以我才来这里。最重要的答案让我找到了正确的方向。

当前(10月16日2日)Bootstrap 3 css Sticky footer(固定大小)看起来像这样:

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

只要页脚的大小是固定的，body margin-bottom就会产生一个推力，让页脚可以坐进去。在本例中，两者都设置为60px。但如果页脚不是固定的，高度超过60px，它将覆盖你的页面内容。

使灵活:删除css正文边距和页脚高度。然后添加JavaScript来获取页脚高度，并设置body的marginBottom。这是通过setfooter()函数完成的。接下来添加事件监听器，用于页面第一次加载和调整大小时运行setfooter。注意:如果你的页脚有一个手风琴或其他触发大小变化的东西，而没有调整窗口的大小，你必须再次调用setfooter()函数。

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

2016-10-03 01:49:44

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

body { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } body > * { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } body > nav + .container { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } /* Reset CSS and some footer styling. Only needed on StackOverflow */ body { padding: 50px 0 0; margin: 0; } footer { background-color: #f8f8f8; padding: 15px 0 5px; border-top: 1px solid #e7e7e7; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <!DOCTYPE html>  <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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 id="navbar" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" 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> </div> </nav>  <div class="container"> <div class="page-header"> <h1>Responsive sticky footer of any height</h1> </div> <p class="lead">You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.</p> </div> <footer class="footer"> <div class="container"> <p class="text-muted">Place sticky footer content here.</p> <p class="text-muted">And some more content.</p> <p class="text-muted">And more...</p> </div> </footer>

这里是无前缀的SCSS(吞咽/咕噜声):

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

2016-12-30 21:01:49

当前版本的bootstrap似乎不再适用于这个函数了。如果你下载了他们的sticky-footer-navbar的例子，并在主体区域放置了大量的内容，footer将被向下推过视口的底部。它一点也不粘。

2016-12-01 22:26:16

参考官方的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>

您可以在粘脚示例的源代码中找到这个css的链接。

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

完整网址: https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css

2013-12-16 13:08:10

Twitter Bootstrap 3 Sticky Footer

推荐文章

最新文章

标签