带侧边栏的Bootstrap完全100%高度

Kon*_*nov 2 html css height sidebar twitter-bootstrap

我无法理解为什么右侧边栏的高度,而不是100%,当我向下滚动页面时,背景被中断.

<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>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

生活中的例子在这里

Jac*_*ャック 5

几件事.

  1. position在CSS中设置了两个属性#nav.
  2. 你应该只有一个,它应该是 position:fixed
  3. 不需要top: 0; left: 0AND bottom: 0;如果物体的高度为100%并固定在左上角,它将始终触及底部.

CSS应该是:

#nav {
  position:fixed;
  width: 200px;
  z-index: 1000;
  left: 0;
  top: 0;
  border-right: 1px solid #162636;
  height: 100%;
}
Run Code Online (Sandbox Code Playgroud)