twitter-bootstrap - 关于制作 100% 侧边栏和容器的问题

Question

你能看看这个链接，让我知道为什么我不能制作一个 100% 高度的两列布局吗？

如您所见，我正在使用

html, body { 
  height: 100%;
}
.container-fluid{
  padding:0;
  height:100% !important;
  min-height: 100% !important;
}
.row-fluid{
  margin-left:0px; 
  background-color:#F5F5F5 !important;
  height:100% !important; 
  min-height: 100% !important;
}
.well.sidebar-nav{
  background-color:#383E4B !important;
  left:0;
  border:none;
  max-width:300px !important;
  margin-left: 0!important;
  height:100% !important;
  min-height: 100% !important;
}
.span9{
  background-color:#F5F5F5 !important;
  padding-top:50px; 
  margin-top:10px; 
  border:none !important; 
  height:100% !important;  
  min-height: 100% !important;
}
.navbar .avbar-inverse .navbar-fixed-top{
  border:none !important;
}

更新 这里是jsfiddle

Answer 1

不得不说，样式看起来真的很疯狂，你应该尝试使用网络上的示例如何进行简单的两栏设计。

无论如何，实现这一点的一个简单方法是使用 css 伪属性:after

.span2:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}

也不要忘记添加height: 100%;

.row-fluid .span2 {
    height: 100%;
    width: 14.8936%;
}