请参见下面的示例。如果页面内容较少，这将使页脚定位在底部，如果页面内容较多，则页脚将像普通页脚一样。
* { margin: 0;}html, body { height: 100%;}.wrapper { min-height: 100%; 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 */}
<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的答案。
解决方法我正在为正在设计的网站使用Bootstrap 3。
我想要一个像这样的样本页脚。
请注意，我不希望它已修复，因此引导程序navbar-fixed-bottom无法解决我的问题。我只是希望它始终位于内容的底部并且也要有所响应。
任何指南将不胜感激。
编辑：
对不起，如果我不清楚。现在发生的是，内容主体没有足够的内容时。我的页脚向上移动，然后在底部留下一个空白区域。
这就是我现在所拥有的导航栏
<nav style='padding:0 0 120px 0'><div class='container'> <div class='row'><div class='col-sm-4'> <h5 id=’footer-header’> SITEMAP </h3> <div style='padding: 0 0 0 0px'><p>News</p><p>contact</p> </div> <div 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;}
