Twitter Bootstrap - 100％身高

Question

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

我被这样的设计灵感：
这将是一个两个栏布局“侧边栏”和“主要内容”，但我不能得到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）入门上的第二图像消除外边缘的

可以看到，我有浏览器边界和侧栏/主要元素，然后在两者之间余量之间的余量。如果我在我粘贴的所有HTML元素中添加无边距（包括身体标记），我需要摆脱这种情况，但我仍然无法获得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

我不知道如果这是你在找什么，but here it goes.

刚修改过的CSS略。 margin:0;至html, body标签。

Answer 3

这里是一个自举3工程..

确保HTML和身体都是100％高度的例子。包装侧边栏和内容，然后在侧边栏上使用position:absolute。

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

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