Html bootstrap 3.0 全长身体侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20128472/
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 3.0 full length body sidebar
提问by black_rabbit
I'm trying to get bootstrap divs to be full body length.
我试图让引导 div 成为全身长度。
This is what I've tried so far: http://jsfiddle.net/bKsad/315/
这是我到目前为止尝试过的：http: //jsfiddle.net/bKsad/315/
html, body {
min-height: 100%
}
.wrap {
height: 100%
}
.sidebar {
background-color:#eee;
background-repeat: repeat;
padding:0;
min-height:100% !important;
position:relative;
}
.sidebar .sidebar-content {
height:100%;
width:100%;
padding: 5px;
margin:0;
position:relative;
}
As the right column grows longer, I want the sidebar to do the same.
随着右栏变长，我希望侧边栏也做同样的事情。
回答by pjfamig
The key is to understand the "col-md-x" and "col-md-offset-x" styles provided by Bootstrap 3:
关键是要了解Bootstrap 3提供的“col-md-x”和“col-md-offset-x”样式：
<div class="container-fluid">
<div class="row">
<div class="col-md-3 sidebar">
Sidebar Content
</div>
<div class="col-md-9 col-md-offset-3 content">
Main Content
</div>
</div>
</div>
Then use CSS to make sure the breakpoints line-up. You'll need to fine-tune padding/margin for your particular needs, but the offset and @media breakpoints handle the overall layout pretty well:
然后使用 CSS 来确保断点排列。您需要根据您的特定需求微调填充/边距，但偏移量和 @media 断点可以很好地处理整体布局：
html, body, .container-fluid, .row {
height: 100%;
}
.sidebar {
background-color: #CCCCCC;
}
@media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: #CCCCCC;
}
}
Working solution: http://www.bootply.com/111837
工作解决方案：http: //www.bootply.com/111837
If you use "col-sm-x" or "col-lg-x" you just change the @media CSS to the corresponding min-width (768px for sm and 1200px for lg). Bootstrap handles the rest.
如果您使用“col-sm-x”或“col-lg-x”，您只需将@media CSS 更改为相应的最小宽度（sm 为 768px，lg 为 1200px）。Bootstrap 处理其余的。
回答by kjdion84
I solved this by using an absolutely positioned div and a bit of jQuery. I have a Bootstrap navbar with a fixed height of 50px, so that is why you're seeing the 50's in the code. You can remove this if you don't have a top navbar.
我通过使用绝对定位的 div 和一些 jQuery 解决了这个问题。我有一个固定高度为 50px 的 Bootstrap 导航栏，所以这就是你在代码中看到 50 的原因。如果您没有顶部导航栏，则可以将其删除。
This solution works dynamically with any height.
此解决方案适用于任何高度。
The CSS:
CSS：
.sidebar {
background-color: #333333;
position: absolute;
min-height: calc(100% - 50px);
}
The jQuery:
jQuery：
var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();
if (document_height > sidebar_height) {
sidebar.css('height', document_height - 50);
}
The neat thing about this is there will be no flickering of the background because its using CSS to adjust the min-height, so that the jQuery resizing that normally causes a flickering of the background will be hidden on page load.
这样做的好处是背景不会闪烁，因为它使用 CSS 来调整最小高度，因此通常会导致背景闪烁的 jQuery 调整大小将在页面加载时隐藏。
回答by Shadow_boi
approach 1: added empty div with style="clear:both" at the end of wrap div. http://jsfiddle.net/34Fc5/1/
方法 1：在 wrap div 的末尾添加 style="clear:both" 的空 div。 http://jsfiddle.net/34Fc5/1/
approch 2: http://jsfiddle.net/34Fc5/:
方法 2：http: //jsfiddle.net/34Fc5/：
html, body {
height: 100%;
}
.wrap {
height: 100%;
overflow: hidden;
}
.sidebar {
background-color:#eee;
background-repeat: repeat;
padding:0;
height:100% !important;
position:relative;
}
.sidebar .sidebar-content {
height:100%;
width:100%;
padding: 5px;
margin:0;
position:relative;
}
added "overflow: hidden;" to .wrap changed height: 100% to html, body changed height: 100% to .sidebar
添加了“溢出：隐藏；” .wrap 改变高度：100% 到 html，body 改变高度：100% 到 .sidebar
using css way, the height of the sidebar will only match the view port of the browser. so if you look at approach 1, when you scroll you will notice the background stop at viewport. to fix it js is required.
使用css方式，侧边栏的高度只会匹配浏览器的视口。因此，如果您查看方法 1，当您滚动时，您会注意到背景停在视口处。修复它需要js。
回答by Yoko
The only thing that got it working for me (after many hours of trying everything) was
让它为我工作的唯一一件事（经过数小时的尝试）是
HTML
<nav class="col-sm-3 sidebar">
HTML
<nav class="col-sm-3 sidebar">
CSS
padding-bottom: 100%;
CSS
padding-bottom: 100%;
The padding in percent did it for me. Now it goes all the way to the bottom of the page.
百分比填充对我来说是这样的。现在它一直到页面底部。
