我正在尝试使用twitter-bootstrap框架为我的应用程序设计一个管理面板,但是我无法让我的布局工作.
我受到这种设计的启发：
这将是一个两列布局“边栏”和“主要内容”,但我无法获得100％的高度工作.我设法得到2列布局与100％的宽度使用这个代码：
<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)摆脱第二张图像上的外边缘
您可以看到我在浏览器边框和Sidebar / Main元素之间有余量,然后在两者之间保留余量.我需要摆脱这个,如果我添加没有边缘的所有我的元素在HTML我粘贴包括身体标签我仍然没有得到100％的高度,我仍然无法摆脱浏览器边框和边栏和主要内容之间的边距,边栏和主要内容之间的边距空间消失.
解决方法
我不太确定Bootstrap的网格模型是你在这里寻找的.你可能会寻找绝对的定位.例如：
#sidebar,#content {
position: absolute;
top: 0;
bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }
