Question

请你看看this LINK，让我知道为什么我无法制作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

我不得不说，样式看起来真的很疯狂，你应该尝试在网上使用例子simple two column design。

无论如何，实现此目的的一种简单方法是使用css伪属性:after

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

另外请不要忘记添加height: 100%;

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

制作100％边栏和容器的问题

1 个答案: