0

我能够制作一个两列布局，使用绝对定位扩展容器流体的全长。我想要做的是能够创建一个两列布局，其中每列使用行流体填充整个容器。但是，当我尝试此操作时，我的行流体仅占用 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;
}

Here is a link to a fiddle that works using absolute positioning, but I want to get a similar effect using bootstrap row-fluids and spans. http://jsfiddle.net/PrFeA/

Any ideas?

4

1 回答 1

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

查看更新的小提琴

于 2013-08-28T06:03:23.550 回答