为了账号安全,请及时绑定邮箱和手机立即绑定

Twitter Bootstrap 3 Sticky Footer

/ 猿问

Twitter Bootstrap 3 Sticky Footer

米琪卡哇伊 2019-08-24 14:56:50

Twitter Bootstrap 3 Sticky Footer

我一直在使用twitter bootstrap框架已经有一段时间了,他们最近更新到版本3!

我无法将粘性页脚粘到底部,我使用了twitter bootstrap网站提供的入门模板,但仍然没有运气,有什么想法吗?


查看完整描述

3 回答

?
拉风的咖菲猫

简单的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());});


查看完整回答
反对 回复 2019-08-24
?
智慧大石

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

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


查看完整回答
反对 回复 2019-08-24
?
宝慕林4294392

这已经被flexbox一次性解决了:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer></body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;}.Site-content {
  flex: 1;}


查看完整回答
反对 回复 2019-08-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信