Bootstrap双列布局100％高度额外空间

我正在尝试使用固定边栏宽度制作两列全高布局。为此，我使用display: table; display: table-cell;方法。这是我到目前为止的代码：Bootstrap双列布局100％高度额外空间

HTML：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
    </ul> 
</nav> 

<div class="page-wrap"> 
    <div class="container">  
     <div class="page-sidebar"> 
      <ul> 
       <li><a href="#">there'll be navigation</a></li> 
      </ul> 
     </div> 
     <div class="page-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus non?</p> 
     </div> 
    </div> 
</div>

CSS：

html, body { 
    height: 100%; 
} 

.navbar { 
    margin: 0; 
} 

.page-wrap { 
    height: 100%; 
} 

.page-wrap > .container { 
    display: table; 
    table-layout: fixed; 
    height: 100%; 
} 

.page-sidebar { 
    display: table-cell; 
    vertical-align: top; 
    width: 200px; 
    height: 100%; 
    background-color: #ececec; 
} 

.page-sidebar ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

.page-content { 
    display: table-cell; 
    vertical-align: top; 
    width: 100%; 
    height: 100%; 
}

jsfiddle

一切似乎工作正常，但一两件事。尽管几乎没有内容，页面底部还有额外的空间，这使得滚动条可见。是什么引起的，以及如何处理它呢？非常感谢。

来源

2014-01-14 covfefe