Twitter Bootstrap - 100％高度

Question

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

我受到这种设计的启发：
这将是一个两栏布局“侧边栏”和“主要内容”，但我不能让100％的高度工作。我设法使用此代码获得2列宽度为100％的列布局：

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; }

<强> Try it out.

Answer 2

以下示例适用于Bootstrap 3 ..

确保HTML和正文均为100％高度。将侧边栏和内容换行，然后使用侧边栏上的position:absolute。

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

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

Answer 3

我不确定这是否是您要找的， but here it goes.

稍微修改了CSS。 margin:0;到html, body代码。