twitter-bootstrap 带侧边栏的 Bootstrap 完全 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18601135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap fully 100% height with a sidebar
提问by Konstantin Rusanov
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.
我不明白为什么右侧边栏的高度不是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>
Life example here
生活例子在这里
回答by Jacques ジャック
A couple things.
一些事情。
- You have two
positionproperties set in your CSS for the#nav. - You should have only one, and it should be
position:fixed - There is no need for
top: 0; left: 0ANDbottom: 0;If the object is 100% height and fixed to the top left, it will always touch the bottom.
- 您
position在 CSS 中为#nav. - 你应该只有一个，而且应该是
position:fixed - 不需要
top: 0; left: 0ANDbottom: 0;如果对象是 100% 的高度并且固定在左上角，它会一直接触到底部。
CSS should be:
CSS 应该是：
#nav {
position:fixed;
width: 200px;
z-index: 1000;
left: 0;
top: 0;
border-right: 1px solid #162636;
height: 100%;
}
回答by heidi
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 positionproperty to position:fixedcould help.
侧边栏的高度是 100%，但是，当您向下滚动页面时，页面的高度会超过 100%。侧边栏的高度不会增加以匹配页面的高度。因此，将侧边栏的position属性更改为position:fixed可能会有所帮助。
