Bootstrap Footer not Sticking to the bottom of the page - html

Question

I'm using Bootstrap 3.3.5 to display a footer at the bottom of webpages using the .navbar navbar-default class. On pages which are displaying a list of items greater than 10 the footer is being displayed correctly at the bottom of the page but on pages having less than 5 items then the footer is being displayed at the middle of the page instead of the bottom.
HTML code..
<nav class="navbar navbar-default" style="margin-bottom:0px;padding-botton:0px">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbarBottom">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbarBottom">
<ul class="nav navbar-nav navbar-center">
<li><span class="glyphicon glyphicon-th-large"></span> About</li>
<li><span class="glyphicon glyphicon-pencil"></span> Blog</li>
<li><span class="glyphicon glyphicon-road"></span> How It Works</li>
<li><span class="glyphicon glyphicon-certificate"></span> Credits</li>
<li><span class="glyphicon glyphicon-earphone"></span> Contact</li>
<li><span class="glyphicon glyphicon-comment"></span><b style="color:blue;"> Survey</b></li>
</ul>
</div>
</div>
</nav>
After changing the navbar class to "navbar navbar-default navbar-fixed-bottom" the footer is fixed to the bootom of the page but I'm not able to scroll down to the last item of the list. Please help..

Answer 1

Try this...
.navbar{
position:absolute;
bottom:0;
width:100%;
}

Answer 2

ok so if you want footer to stick on scroll
then
.navbar
{
position: fixed;
bottom: 0;
width: 100%;
}
and if you just want footer
.navbar
{
position: absolute;
bottom: 0;
width: 100%;
}