CSS Twitter Bootstrap - 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16257995/
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
Twitter Bootstrap - 100% Height
提问by Sterling Duchess
I'm trying to design an Admin panel for my application using twitter-bootstrap framework but i cannot get my layout to work.
我正在尝试使用 twitter-bootstrap 框架为我的应用程序设计一个管理面板，但我无法让我的布局工作。
I was inspired by this design: 
It would be a two column layout "Sidebar" and "Main content" but I can't get the 100% height to work. I managed to get 2 column layout with 100% width using this code:
我受到这个设计的启发：
它是一个两列布局“侧边栏”和“主要内容”，但我无法获得 100% 的高度。我设法使用以下代码获得 100% 宽度的 2 列布局：
HTML
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span2 colorize-white">
<!--Sidebar content-->Sidebar
</div>
<div class="span10 colorize-white">
<!--Body content-->Main
</div>
</div>
</div>
CSS
CSS
/* Global */
html, body {
color: #6B787F;
padding: 0;
height: 100%;
background: #11161a;
font-family: 'PT Sans' !important;
}
.colorize-white {
background: #FFFFFF;
}
.no-margin {
margin: 0;
}
I'm half way there but there are two things I can't solve.
1) 100% Height
2) Getting rid of outer margins on second image
我已经完成了一半，但有两件事我无法解决。
1) 100% 高度
2) 去掉第二张图片的外边距
You can see that I have margin between browser border and Sidebar/Main elements and then margin between the two. I need to get rid of this if I add no-margin to all my elements in HTML i pasted including body tag i still don't get 100% height and i still cant get rid of margins between browser border and sidebar and main content while the margin space between Sidebar and Main content disappears.
您可以看到我在浏览器边框和 Sidebar/Main 元素之间有边距，然后在两者之间有边距。如果我在粘贴的 HTML 中的所有元素中添加无边距，包括 body 标签，我需要摆脱这个，我仍然没有获得 100% 的高度，我仍然无法摆脱浏览器边框和侧边栏和主要内容之间的边距侧边栏和主要内容之间的边距空间消失。
采纳答案by icktoofay
I'm not so sure Bootstrap's grid model is what you're looking for here. You may instead be looking for absolute positioning. For example:
我不太确定 Bootstrap 的网格模型是您在这里寻找的。您可能正在寻找绝对定位。例如：
#sidebar, #content {
position: absolute;
top: 0;
bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }
回答by Zim
Here is an example that works for Bootstrap 3..
这是一个适用于 Bootstrap 3 的示例。
Make sure the HTML and body are both 100% height. Wrap the sidebar and content and then use position:absoluteon the sidebar.
确保 HTML 和正文都是 100% 的高度。将侧边栏和内容包裹起来，然后position:absolute在侧边栏上使用。
http://www.bootstrapzero.com/bootstrap-template/basis
http://www.bootstrapzero.com/bootstrap-template/basis
Code: http://bootply.com/86704
回答by Mee
I am not sure if this is what you are looking for, but here it goes.
我不确定这是否是您要找的东西，但它就在这里。
just modified the CSS slightly. margin:0;to html, bodytag.
只是稍微修改了 CSS。margin:0;到html, body标签。
