0

絶対配置を使用して、コンテナー流体の全長を拡張する 2 列のレイアウトを作成できます。私がやりたいことは、行流体を使用して各列がコンテナー全体を埋める 2 列のレイアウトを作成できるようにすることです。ただし、これを試してみると、行の流体は 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;
}

これは、絶対配置を使用して機能するフィドルへのリンクですが、ブートストラップの行流体とスパンを使用して同様の効果を得たいと考えています。http://jsfiddle.net/PrFeA/

何か案は？

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 に答える