如何创建与 Bootstrap 3 兼容的粘性页脚 [英] How to create a sticky footer that plays well with Bootstrap 3

查看：18
本文介绍了如何创建与 Bootstrap 3 兼容的粘性页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

无论是否有顶部导航，网站都有粘性页脚是很常见的.Bootstrap 有一个工具可以轻松创建固定页脚，但没有这样的工具来创建粘性页脚 - 有很大的不同.

谷歌搜索这个问题会发现成百上千的开发者有同样的问题，但没有好的答案.

具有讽刺意味的是， 在 getbootstrap 站点的示例部分.

但该示例不包括顶部导航.对于带有粘性页脚的固定顶部导航，请参阅this plnkr，或下面的代码.

样式 CSS:

/* 样式放在这里 *//* 粘性页脚样式--------------------------------------------------*/html,身体 {高度:100%；/* html 和 body 元素不能有任何填充或边距.*/}/* 页面内容的包装器向下推页脚 */#裹 {最小高度:100%；高度:自动；/* 按高度负缩进页脚 */边距:0 自动 -60px；/* 按页脚高度填充底部 */填充:0 0 60px；}/* 这里设置页脚的固定高度 */#页脚{高度:60px；背景色:#f5f5f5；}/* 自定义页面 CSS--------------------------------------------------*//* 模板或粘性页脚方法不需要.*/.容器 {宽度:自动；最大宽度:680px；填充:0 15px；}.container .credit {边距:20px 0;}

Index.html:

<html lang="zh-cn"><头><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><link rel="快捷图标" href="../../docs-assets/ico/favicon.png"><title>Bootstrap 的粘性页脚模板</title><!-- Bootstrap 核心 CSS --><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"><!-- 此模板的自定义样式--><link href="style.css" rel="stylesheet"><!-- 仅用于调试目的.实际上不要复制这一行！--><!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--><!-- HTML5 shim 和 Respond.js IE8 支持 HTML5 元素和媒体查询 --><!--[如果是 IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--><身体><!-- 将所有页面内容包装在这里--><div id="包裹"><nav class="navbar navbar-default" role="navigation"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Brand</a>

<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link</a></li><li><a href="#">链接</a></li><li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li><li class="divider"></li><li><a href="#">一个单独的链接</a></li><form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search">

<button type="submit" class="btn btn-default">提交</button></表单><ul class="nav navbar-nav navbar-right"><li><a href="#">链接</a></li><li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li></div><!--/.navbar-collapse --></nav><!-- 开始页面内容--><div class="容器"><div class="page-header"><h1>粘性页脚</h1>

<p class="lead">使用此自定义 HTML 和 CSS，将固定高度的页脚固定到桌面浏览器的视口底部.</p><p>使用<a href="../sticky-footer-navbar">带有固定导航栏的粘性页脚</a>如果需要，也可以.</p>

</div><!-- Wrap Div end --><div id="页脚"><div class="容器"><p class="text-muted credit">示例礼貌<a href="http://martinbean.co.uk">Martin Bean</a>和<a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>

<!-- Bootstrap 核心 JavaScript==================================================--><!-- 放置在文档的末尾，以便页面加载更快-->

With or without a top nav, it is very common for sites to have a sticky footer. Bootstrap has a facility to easily create fixed footers, but no such facility for creating sticky footers - there is a big difference.

Googling this question will reveal that hundreds if not thousands of developers have the same question but with no good answer.

Ironically, the Bootstrap documentation page itself has a sticky footer alongside bootstrap styling and a fixed top navbar. It's all custom css though, and not part of the framework. So an obvious route is to take and refactor their custom styling, since it obviously plays well within the Bootstrap framework, but that seems more painful than it ought to be.

See this plunkr for an example page with a Bootstrap top navbar, and an undesirable, non-sticky footer.

Problem:

(Thanks Softlayer - for the graphics)

Desired Solution:

Of course the footer should be responsive and cross-browser friendly as well...

解决方案

The answer, as Schmalzy points out, can be found here in the examples section of the getbootstrap site.

But that example does not include a top nav. For fixed top nav with sticky footer, see this plnkr, or code below.

Style CSS:

/* Styles go here */

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


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .credit {
  margin: 20px 0;
}

Index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Sticky Footer Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">

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

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

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

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <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="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</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><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</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><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

      <!-- 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>
        <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
      </div>
    </div><!-- Wrap Div end -->

    <div id="footer">
      <div class="container">
        <p class="text-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>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>

这篇关于如何创建与 Bootstrap 3 兼容的粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆