如何解决Bootstrap 3将页脚冲洗到底部不固定
请参见下面的示例。如果页面内容较少,这将使页脚定位在底部,如果页面内容较多,则页脚将像普通页脚一样。
* {
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 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。