css - 使用 bootstrap2 的绝对定位布局

Question

我能够制作一个两列布局，使用绝对定位扩展容器流体的全长。我想要做的是能够创建一个两列布局，其中每一列使用行流体填充整个容器。但是，当我尝试这样做时，我的行流体只占据了 div 中文本的高度。

这是我希望能够执行的操作的示例，但行流体延伸到容器的底部。

   <div class="container-fluid">
       <div class="row-fluid">
           <div class="span2">

            </div>
            <div class="span10">

            </div>
        </div>
  </div>

但我唯一能让它工作的方法是使用绝对定位，我在这个网站上找到了一个例子。

    <div class="container-fluid">
        <div id="sidebar">
        </div>
        <div id="content">
    </div>

使用这个 CSS:

html, body {
height: 100%;
background-color:darkcyan;
}

.container-fluid {
    min-height: 100%;
    padding:0px;
}

#sidebar, #content {
    position: absolute;
    top:0;
    bottom:0;
}

#sidebar {
    left: 0;
    width: 15em;
    background-color: bisque;
}

#content {
    left: 18em;
    right:0;
    background-color:bisque;
}

这是使用绝对定位工作的 fiddle 的链接，但我想使用 Bootstrap 行流体和跨度获得类似的效果。 http://jsfiddle.net/PrFeA/

有什么想法吗？

Answer 1

CSS 中的百分比值需要父元素中的显式值，否则它们将不起作用，这意味着要让您的 .span 列填充 .container-fluid 高度，你需要为 .container-fluid 和 .row-fluid 设置一个明确的高度值:

html, body {
    height: 100%;
    background-color:darkcyan;
}
.container-fluid {
    height: 100%;
    padding:0px;
    margin:0px;
}
.row-fluid{
    height: 100%;
}
/*Styles for the span columns*/
.row-fluid > div{
    background: bisque;
    height: 100%;
}

查看 updated fiddle