Html Bootstrap 3 将页脚平齐到底部.不固定

我正在为我正在设计的网站使用Bootstrap3.

我想要一个这样的页脚样本.

请注意，我不希望它被修复，所以 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;
}