Bootstrap 3将页脚向下冲洗。不固定 [英] Bootstrap 3 Flush footer to bottom. not fixed

问题描述

我使用Bootstrap 3作为我设计的网站。

I am using Bootstrap 3 for a site I am designing.

我想要一个像这样的页脚。
示例

I want to have a footer like this sample. Sample

请注意，我不想it FIXED所以bootstrap navbar固定底不解决我的问题。我只是希望它总是在内容的底部，也响应。

Please note that I don't want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. I just want it to be always at the bottom of the content and also be responsive.

任何指南将非常感激。

编辑：

对不起，如果我不清楚。
现在发生的是，当内容正文没有足够的内容时。

Sorry if I wasn't clear. What happens now is that when the content body does not have enough content. My footer moves up and then it leaves an empty space at the bottom.

这是我现在在我的导航栏

This is what i have now for my navbar

<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;
}

推荐答案

如果网页内容较少，并且页面有更多内容，其行为与正常页脚一样，则会将页脚置于底部。

See the example below. This will position your Footer to stick to bottom if the page has less content and behave like a normal footer if the page has more content.

演示和教程

Demo and Tutorial

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>

---

UPDATE ：版本的Bootstrap演示如何添加粘性页脚，而不添加包装器。详情请参阅Jboy Flaga的答案。

---

UPDATE: New version of Bootstrap demonstrates how to add sticky footer without adding a wrapper. Please see Jboy Flaga's Answer for more details.

这篇关于Bootstrap 3将页脚向下冲洗。不固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！