twitter-bootstrap v4 bootstrap 全高侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37113533/
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
v4 bootstrap full height sidebar
提问by sh1omi
I using the latest version of bootstrap and my siderbar is too short and not full height.
You can view it from here: http://srv.sniperjum.com/sh1omi/bootstrap-dev/
CSS: http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
This problem is from my CSS or is it a problem from the bootstrap? and how can I fix it?
我使用最新版本的引导程序，我的侧边栏太短而且不是全高。
你可以从这里查看：http: //srv.sniperjum.com/sh1omi/bootstrap-dev/
CSS：http: //srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
这个问题来自我的 CSS 还是引导程序的问题？我该如何解决？
CSS
CSS
li.active{
background-color: #428bca;
}
li {
padding-bottom: 5px;
padding-top: 5px;
}
.sidebar{
background-color: #f5f5f5;
padding-right: 20px;
padding-top: 20px;
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
button{
color: #fafafa
}
HTML
HTML
<nav class="navbar navbar-dark navbar-full bg-inverse">
<button type="button" class="navbar-toggler" onclick="ToogleNavbar()">☰</button>
</nav>
<div class="container-fluid">
<div class="row" >
<div class="col-sm-3 col-md-2 sidebar" id="Navbar">
<ul class="nav nav-sidebar">
<li class='active'><a href="/">Home</a></li>
<li><a href="../notes">Notes</a></li>
<li><a href="../chat">Chat</a></li>
<li><a href="../rss">RSS</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">\</div>
</div>
</div>
回答by Zim
Bootstrap 4 has changed since this question was asked, but you can make the sidebar full height using min-height..
自提出此问题以来，Bootstrap 4 发生了变化，但您可以使用min-height..
.sidebar{
background-color: #f5f5f5;
padding-right: 20px;
padding-top: 20px;
min-height: calc(100vh - 50px);
}
http://www.codeply.com/go/oiByWVrIbe(Bootstrap 4 alpha 6)
http://www.codeply.com/go/oiByWVrIbe（引导程序 4 alpha 6）
Update Bootstrap 4.1
更新引导程序 4.1
Flexbox can be used to allow the container and its child divs (row, col and sidebar) to fill height...
Flexbox 可用于允许容器及其子 div（行、列和侧边栏）填充高度...
https://www.codeply.com/go/fz2R7nUwue
https://www.codeply.com/go/fz2R7nUwue
Related: Create a responsive navbar sidebar "drawer" in Bootstrap 4?
回答by Giacomo Torricelli
The easier way is to do something like that:
更简单的方法是做这样的事情：
.sidebar {
height: calc(100vh - 54px); /* 54 pixel is the height of your .navbar */
}
回答by Uswer721
.sidebar{
position: absolute;
width: 250px;
height: 100%; }
The height attribute is used to set the height of the sidebar.
height 属性用于设置侧边栏的高度。
For a full length side-bar a value of 100% is to be given. For a half screen length a value of 50% is given So on and so forth.
对于全长侧边栏，应给出 100% 的值。对于半个屏幕长度，给出 50% 的值等等。
This should help.
这应该有帮助。
回答by Varma
You can try this instead of yours
你可以试试这个而不是你的
remove these two bootstrap cols<div class="col-sm-3 col-md-2 sidebar" id="Navbar">
If you use this cols the position of the property will be relative i think it's better to remove those cols and use this css.
删除这两个引导列<div class="col-sm-3 col-md-2 sidebar" id="Navbar">
如果您使用此列，则该属性的位置将是相对的，我认为最好删除这些列并使用此 css。
width: 210px;
height: 100%;
position: fixed;
