固定侧导航栏如何适合父div？

Question

使用bootstrap：

我有一个左侧导航栏（col-sm-2）和右侧内容部分（col-sm-10）。

我想让左侧导航栏固定在屏幕上，

但是，一旦我在那里添加“position：fixed”，导航栏就会变小。

.row.content {
  height: 1500px;
}

.sidenav {
  height: 100%;
  background-color: #f1f1f1;
}

.navigationDiv {
  height: 100%;
  position: fixed;
  background-color: pink; // color should be #f1f1f1; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row content">
    <div class="col-sm-2 sidenav">

      <div class="navigationDiv">

        <h4 class="text-center">Jimmy's Blog</h4>

        <ul class="nav nav-pills nav-stacked">
          <li class="active navbar-btn text-center"><a href="">    Home        </a></li>
          <li class="navbar-btn text-center"><a href="">  Photo Gallery        </a></li>
          <li class="navbar-btn text-center"><a href="">  Blog Log          </a></li>
          <li class="navbar-btn text-center"><a href="">  About Me            </a></li>
        </ul>
        <br>
      </div>
    </div>

    <div class="col-sm-10">
      <p>sdkjflksadjflk;sjadkl;jsdlak;jflk;sdjfl;ksjlfjks;ajfkl;sajdfljsdaklfls;adjflksdjfl;;fj<br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br>sdkjflksadjflk;sjadkl;jsdlak;jflk;sdjfl;ksjlfjks;ajfkl;sajdfljsdaklfls;adjflksdjfl;;fj<br><br>
      </p>
    </div>

  </div>
</div>

如何设置navigationDiv适合父sidenav？

Fiddle Link