Bootstrap fully 100% height with a sidebar

Question

I can not understand why is it that the height of the sidebar on the right, not 100%, and when I scroll down the page, the background is interrupted.

<nav id="nav" class="nav-primary hidden-xs nav-vertical">
<ul class="nav affix-top" data-spy="affix" data-offset-top="50">
<li><a href=""><i class="icon-user"></i> Профиль</a></li>
<li><a href=""><i class="icon-bar-chart"></i> Финансы</a></li>
<li><a href=""><i class="icon-sitemap"></i> Товары</a></li>
<li><a href=""><i class="icon-signal"></i> Товары (статистика)</a></li>
<li><a href=""><i class="icon-envelope-alt"></i> Уведомления (10)</a></li>
</ul>
</nav>

Life example here

Answer 1

A couple things.

1. You have two position properties set in your CSS for the #nav.
2. You should have only one, and it should be position:fixed
3. There is no need for top: 0; left: 0 AND bottom: 0; If the object is 100% height and fixed to the top left, it will always touch the bottom.

CSS should be:

#nav {
  position:fixed;
  width: 200px;
  z-index: 1000;
  left: 0;
  top: 0;
  border-right: 1px solid #162636;
  height: 100%;
}

Answer 2

The height of the sidebar is 100%, however, when you scroll down the page, the height of the page becomes more than 100%. The sidebar's height won't increase to match the page's height. Thus, changing the sidebar's position property to position:fixed could help.