有或没有顶部导航,这是非常常见的网站有一个粘性页脚。 Bootstrap有一个工具,可以轻松地创建固定页脚,但没有这样的设施创建粘性页脚 – 有一个很大的区别。
Googling这个问题将揭示,成百上千的开发者有同样的问题,但没有好的答案。
讽刺的是,Bootstrap documentation页本身有一个粘性页脚旁边的引导式造型和固定顶部导航栏。这是所有的自定义css虽然,而不是框架的一部分。所以一个明显的路线是采取和重构自己的自定义样式,因为它显然在Bootstrap框架中运行良好,但这似乎比它应该是更痛苦。
对于带有Bootstrap top导航栏的示例页面,以及不希望的非粘性页脚,请参见this plunkr。
问题:
(感谢Softlayer – 为graphics)
所需解决方案:
当然,页脚应该是响应和跨浏览器友好以及…
解决方法
正如Schmalzy指出的,答案可以在getbootstrap网站的示例部分找到
here。
但是该示例不包括顶部导航。对于带有粘性页脚的固定顶部导航,请参阅this plnkr或下面的代码。
样式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>