Twitter Bootstrap - 100％高度 [英] Twitter Bootstrap - 100% Height

问题描述

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

I'm trying to design an Admin panel for my application using twitter-bootstrap framework but i cannot get my layout to work.

我受到这个设计的启发：

这将是一个两列布局Sidebar和主要内容，但我不能得到100％的高度工作。我设法使用此代码获得了具有100％宽度的两列布局：

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:

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）删除第二张图像上的外边距

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

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

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.

推荐答案

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

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:

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

尝试一下。

Try it out.

这篇关于Twitter Bootstrap - 100％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！