css - 如何将包装器 居中，使其不位于固定的垂直导航栏下方？

Question

目前我的导航栏有这个:

#nav-bar {
    position:fixed;
    float:left;
    width:300px;
    height:100%;
    background-color:#000000;
}

我想要它，这样任何位于它右侧的元素都不会进入导航栏下方，我希望能够使包装器居中 <div>以便它根据导航栏未占据的页面其余部分居中。

我已经尝试实现一个包装器 <div>它位于垂直导航栏下方，但我失败了很多。

这是目前我所拥有的:http://codepen.io/anon/pen/AXkKKo

Answer 1

我不太清楚你想要什么，但是试试这个，

HTML :

<div id="nav-bar"></div>
 <div class="wrapper">
 <div class="content center">
   Test Content
 </div>
</div>

CSS:

#nav-bar {
position:fixed;
float:left;
width:300px;
height:100%;
background-color:#000000;
}
.wrapper{
  background-color:#ff0000;
  margin-left:300px;
  height:100%;
  display:block;
}
.center{
  background-color:#0000ff;
  width:300px;
  margin:auto;
}

代码笔:http://codepen.io/anon/pen/RRmWPA