Twitter Bootstrap - 100% 高度答案

【问题标题】：Twitter Bootstrap - 100% HeightTwitter Bootstrap - 100% 高度
【发布时间】：2013-04-27 23:34:33
【问题描述】：

我正在尝试使用 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% 的高度，而且我仍然无法摆脱浏览器边框和侧边栏和主要内容之间的边距，而侧边栏和主要内容之间的边距空间消失。

【问题讨论】：

抱歉，您是否希望获得与 img 相同的设计？
没有。我正在寻找浏览一些管理面板模板的灵感，这个模板以两列的形式出现。这是我想要的 100% 宽度/高度。
可以分享一下这个设计的链接吗？
dribbble.com/shots/829195-Slate

标签： css twitter-bootstrap

【解决方案1】：

我不太确定 Bootstrap 的网格模型是您在此处寻找的。相反，您可能正在寻找绝对定位。例如：

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

Try it out.

【讨论】：

【解决方案2】：

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

确保 HTML 和正文的高度均为 100%。将侧边栏和内容包裹起来，然后在侧边栏上使用position:absolute。

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

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

【讨论】：

工作了，还有一个问题，你知道如何使它与固定顶部导航栏一起工作吗？

【解决方案3】：

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

只是稍微修改了 CSS。 margin:0; 到 html, body 标签。

【讨论】：