Twitter Bootstrap - 100%高度

Question

我正在尝试使用twitter-bootstrap框架为我的应用程序设计一个Admin面板,但我无法让我的布局工作.

我受到这种设计的启发:
这将是一个两栏布局"侧边栏"和"主要内容",但我不能让100%的高度工作.我设法使用此代码获得100列宽度的2列布局:

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

/* Global */
html, body {
    color: #6B787F;
    padding: 0;
    height: 100%;
    background: #11161a;
    font-family: 'PT Sans' !important;
}

.colorize-white {
    background: #FFFFFF;
}

.no-margin {
    margin: 0;
}

我已经到了一半,但有两件事我无法解决.
1)100%高度
2)摆脱第二张图像上的外边距

您可以看到我在浏览器边框和补充工具栏/主要元素之间有边距,然后在两者之间有边距.我需要摆脱这个,如果我添加无边距我粘贴的所有我的元素我粘贴包括身体标签我仍然没有得到100%的高度我仍然无法摆脱浏览器边框和侧边栏和主要内容之间的边距补充工具栏和主要内容之间的边距空间消失.

Answer 1

我不太确定Bootstrap的网格模型是你在这里寻找的.你可能会寻找绝对定位.例如:

#sidebar, #content {
    position: absolute;
    top: 0;
    bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }

试试看.

Answer 2

这是一个适用于Bootstrap 3的示例..

确保HTML和正文都是100%高度.包装侧边栏和内容,然后position:absolute在侧边栏上使用.

http://www.bootstrapzero.com/bootstrap-template/basis

代码:http://bootply.com/86704