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;
}

这是一个使用绝对定位工作的小提琴的链接，但我希望使用bootstrap row-fluid和span获得类似的效果。 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

使用bootstrap2进行绝对定位布局

1 个答案: