如何创建一个与Bootstrap 3一起使用的粘性页脚 [英] How to create a sticky footer that plays well with Bootstrap 3
本文介绍了如何创建一个与Bootstrap 3一起使用的粘性页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有了或没有顶部导航，网站有一个粘性页脚是很常见的。 Bootstrap可以轻松创建固定页脚，但没有这样的设施用于创建粘性页脚。
Googling这个问题会显示成百上千的开发者有同样的问题，但没有很好的答案。
在getbootstrap网站的示例部分。
但该示例不包括顶部导航。对于带有粘性页脚的固定顶部导航，请参见此 plnkr或下面的代码。
样式CSS：
/ *样式转到这里* /
/ *粘滞页脚样式
------------------------------------------ -------- * /
html，
body {
height：100％;
/ * html和body元素不能有任何填充或边距。 * /
}
/ *包装页面内容下推页脚* /
#wrap {
min-height：100％;
height：auto;
/ *负的缩进页脚的高度* /
margin：0 auto -60px;
/ * pad下面的页脚高度* /
padding：0 0 60px;
}
/ *在这里设置页脚的固定高度* /
#footer {
height：60px;
background-color：＃f5f5f5;
}
/ *自定义页面CSS
------------------------ -------------------------- * /
/ *模板或粘滞脚注方法不需要。 * /
.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-Compatiblecontent =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< meta name =descriptioncontent =>
< meta name =authorcontent =>
< link rel =shortcut iconhref =../../ docs-assets / ico / favicon.png>
< title> Bootstrap的粘性页脚模板< / title>
<！ - Bootstrap core CSS - >
< link href =// netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css =stylesheet>
<！ - 此模板的自定义样式 - >
< link href =style.css =stylesheet>
<！ - 仅用于调试目的。不要实际复制这一行！ - >
<！ - [if lt IE 9]>< script src =../../ docs-assets / js / ie8-responsive-file-warning.js>< script><！[endif] - >
<！ - HTML5 shim和Respond.js IE8对HTML5元素和媒体查询的支持 - >
<！ - [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>
<！ - 在此处包含所有页面内容 - >
< div id =wrap>
< nav class =navbar navbar-defaultrole =navigation>
<！ - 品牌和切换获得分组，更好的移动显示 - >
< div class =navbar-header>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-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>
< / button>
< a class =navbar-brandhref =＃> Brand< / a>
< / div>
<！ - 收集导航链接，表单和其他内容toggling - >
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1>
< ul class =nav navbar-nav>
< li class =active>< a href =＃>链接< / a>< / li>
< li>< a href =＃>链接< / a>< / li&
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdown>下拉< b class =caret>< / b>< / a>
< ul class =dropdown-menu>
< 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>
< / ul>
< / li>
< / ul>
< form class =navbar-form navbar-leftrole =search>
< div class =form-group>
< input type =textclass =form-controlplaceholder =Search>
< / div>
< button type =submitclass =btn btn-default>提交< / button>
< / form>
< ul class =nav navbar-nav navbar-right>
< li>< a href =＃>链接< / a>< / li&
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdown>下拉< b class =caret>< / b>< / a>
< ul class =dropdown-menu>
< li>< a href =＃>动作< / a>< / li>
< li>< a href =＃>另一个操作< / a>< / li>
< li>< a href =＃>这里还有其他内容< / a>< / li>
< li class =divider>< / li>
< li>< a href =＃>分隔的链接< / a>< / li>
< / ul>
< / li>
< / ul>
< / div><！ - /.navbar-collapse - >
< / nav>
<！ - 开始页面内容 - >
< div class =container>
< div class =page-header>
< h1>粘性页脚< / h1>
< / div>
< p class =lead>在桌面浏览器中使用此自定义HTML和CSS将固定高度的页脚固定到视口底部。< / p&
< p>使用< a href =../ sticky-footer-navbar>带有固定导航栏的粘性页脚< / a>如果需要，太。< / p>
< / div>
< / div><！ - Wrap Div end - >
< div id =footer>
< div class =container>
< p class =text-muted credit>示例courtesy< a href =http://martinbean.co.uk> Martin Bean< / a>和< a href =http://ryanfait.com/sticky-footer/> Ryan Fait< / a>。< / p>
< / div>
< / div>
<！ - Bootstrap核心JavaScript
========================== ====================== - >
<！ - 放置在文档的末尾，以便页面加载更快 - >
< / body>
< / html>
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屋！
查看全文
