Bootstrap 3将页脚冲洗至底部。 不固定
我正在使用Bootstrap 3为我devise的网站。
我想有一个像这个样本的页脚。 样品
请注意，我不希望它固定，所以bootstrap navbar-fixed-bottom不能解决我的问题。 我只是希望它始终处于内容的底部，并且还要有所响应。
任何指导将非常感激。
编辑：
对不起，如果我不清楚。 现在发生的是当内容主体没有足够的内容时。 我的页脚向上移动，然后在底部留下一个空的空间。
这是我现在对我的导航栏
<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h5 id='footer-header'> SITEMAP </h3> <div class="col-sm-4" style="padding: 0 0 0 0px"> <p>News</p> <p>contact</p> </div> <div class="col-sm-4" style="padding: 0 0 0 0px"> <p>FAQ</p> <p>Privacy Policy</p> </div> </div> <div class="col-sm-4"> <h5 id='footer-header'> xxxx </h3> <p>yyyyyyyyyyyyy</p> </div> <div class="col-sm-4"> <h5 id='footer-header'> xxxxx </h3> <p>uuuuuuuuuuuuuuu</p> </div> </div> </div> </nav> CSS
.navbar-bottom { min-height: 300px; margin-top: 100px; background-color: #28364f; padding-top: 35px; color:#FFFFFF; }
看下面的例子。 如果页面的内容较less，并且页面的内容较多，则表示页脚的行为与常规页脚相同，这将使您的页脚位于底部。
CSS
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 155px; /* .push must be the same height as .footer */ }
HTML
<div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div>
更新 ：新版本的Bootstrap演示如何添加粘性页脚而不添加包装。 请参阅Jboy Flaga的答案了解更多详情。
这里有一个简单的解决scheme（你不需要创build一个新类）： http : //getbootstrap.com/examples/sticky-footer-navbar/
打开该页面时，右键单击浏览器并单击“查看源代码”，然后打开sticky-footer-navbar.css文件（ http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar。; css ）
你可以看到你只需要这个CSS
/* 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; }
为这个HTML
<html> ... <body> <!-- Begin page content --> <div class="container"> </div> ... <footer class="footer"> </footer> </body> </html>
更新：这并不直接回答整个问题，但其他人可能会觉得这很有用。
这是您的响应式页脚的HTML
<footer class="footer navbar-fixed-bottom"> <div class="container"> </div> </footer>
对于CSS
footer{ width:100%; min-height:100px; background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */ }
注意：在发布此问题时，上面的代码行不会将页脚推到页面内容的下面; 但是当页面上的内容很less时，它会阻止页脚在页面的中间爬行。 例如，将页脚下面的页面内容推到这里看看http://getbootstrap.com/examples/sticky-footer/
<footer class="row"> <div class="panel-footer text-center"> <p>add text</p> </div> </footer>
盖伦·吉德曼（Galen Gidman）已经发布了一个非常好的解决scheme来解决一个没有固定高度的响应式粘性页脚问题。 您可以在他的博客上find他的完整解决scheme： http : //galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
HTML
<header class="page-row"> <h1>Site Title</h1> </header> <main class="page-row page-row-expanded"> <p>Page content goes here.</p> </main> <footer class="page-row"> <p>Copyright, blah blah blah.</p> </footer>
CSS
html, body { height: 100%; } body { display: table; width: 100%; } .page-row { display: table-row; height: 1px; } .page-row-expanded { height: 100%; }
使用flexbox，因为您可以使用它。 引导程序4提供的解决scheme仍然在响应式布局中search重叠内容，例如：它将在移动视图中打破，我碰到最整洁的技巧是使用此处显示的flexbox解决scheme演示:( https://philipwalton.github.io / flexbox / demos / sticky-footer /解决scheme/ ）这样，我们不必处理固定的高度问题，这是一个过时的解决scheme，现在…这种解决scheme适用于引导3和4，无论你使用。
<body class="Site"> <header>…</header> <main class="Site-content">…</main> <footer>…</footer> </body> .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; }
此方法使用最小标记。 只需将所有内容放在一个.wrapper中，该填充底部和底部边距等于页脚高度（在我的示例中为100px）。
html, body { height: 100%; } /* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */ .wrapper { min-height: 100%; height: auto; margin: 0 auto -100px; padding-bottom: 100px; } .footer { height: 100px; } <body> <div class="wrapper"> <p>Your website content here.</p> </div> <div class="footer"> <p>Copyright (c) 2014</p> </div> </body>
对于Bootstrap：
<div class="navbar-fixed-bottom row-fluid"> <div class="navbar-inner"> <div class="container"> Text </div> </div> </div>
这些解决scheme都不能完全为我工作，因为我在我的页脚中使用了navbar-inverse类。 但我确实得到了一个解决scheme，工作和无Javascript。 使用Chrome来帮助形成媒体查询。 页脚的高度随着屏幕大小的变化而变化，因此您必须注意并相应地进行调整。 您的页脚内容（我设置了id =“footer”来定义我的内容）应该使用postion = absolute和bottom = 0来保持它的底部。 也宽度：100％。 这是我的CSS媒体查询。 你将不得不调整最小宽度和最大宽度，并添加或删除一些元素：
#footer { position: absolute; color: #ffffff; width: 100%; bottom: 0; } @media only screen and (min-width:1px) and (max-width: 407px) { body { margin-bottom: 275px; } #footer { height: 270px; } } @media only screen and (min-width:408px) and (max-width: 768px) { body { margin-bottom: 245px; } #footer { height: 240px; } } @media only screen and (min-width:769px) { body { margin-bottom: 125px; } #footer { height: 120px; } }
对于仍在挣扎的人们来说，回答的解决scheme并不像你想要的那样工作，这是我find的最简单的解决scheme。
包装你的主要内容，并分配一个最小视图高度。
<div id="content" style="min-height:60vh"></div> <div id="footer"></div>
这就是它，它工作得很好。
上述解决scheme的主要缺陷是它们对页脚有一个固定的高度 。
而在现实世界中，这并没有削减它，人们使用数以万计的设备，并有这种坏习惯，当你最不期待的时候旋转它们。 **在页脚后面有你的页面内容！
在现实世界中，您需要一个函数来计算页脚的高度，并dynamic调整页面内容的padding-bottom以适应高度。 而且您需要在页面load运行这个小函数，并resize事件resize以及页脚的DOMSubtreeModified （以防万一您的页脚asynchronousdynamic更新，或者包含与交互时更改大小的animation元素）。
这是一个概念validation，使用jQuery v3.0.0和Bootstrap v4-alpha ，但没有理由不能在每个版本的低版本上工作。
jQuery(document).ready(function( $ ) { $.fn.accomodateFooter = function(){ var footerHeight = $('footer').outerHeight(); $(this).css({'padding-bottom':footerHeight+'px'}); } // accomodate footer after its html has changed $('footer').on('DOMSubtreeModified', function(){ $('body').accomodateFooter(); }) // accomodate footer on page load and resize $(window).on('load resize', function(){ $('body').accomodateFooter(); }) $('body').accomodateFooter(); window.addMoreContentToFooter = function() { var f = $('footer'); f.append($('<p />',{ text:"Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."})) .append($('<hr />')); } });
body { min-height: 100vh; position: relative; padding-top: 54px; } footer { background-color: rgba(0,0,0,.65); color: white; position: absolute; bottom: 0; width: 100%; padding: 1.5rem; display: block; } footer hr { border-top: 1px solid rgba(0,0,0,.42); border-bottom: 1px solid rgba(255,255,255,.21); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container"> <div class="starter-template"> <h1>Feed that footer - not a game (yet!)</h1> <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button><hr /><blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.1.1-slim</code> and Bootstrap <code>v4-alpha-6</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote> </div> </div> <footer>I am a footer with dynamic content. <hr />
或这个
<footer class="navbar navbar-default navbar-fixed-bottom"> <p class="text-muted" align="center">This is a footer</p> </footer>
