7

次の Twitter Bootstrap レイヤーを使用した ASP.NET MVC ビューがあります。

<div class="container">
    <div class="container-fluid header">
        [Header content]
    </div>

    <div class="row-fluid">
        <div class="span9">
            <div class="container-fluid main-content">
                [Main Content]
            </div>
        </div>

        <div id="right-sidebar" class="span3">
            [Right Sidebar Content]
        </div>
    </div>
</div>

私の問題は、[メイン コンテンツ] が [右サイドバー コンテンツ] よりもずっと高いことです。[右サイドバー コンテンツ] の背景色が異なるため、フッター ([メイン コンテンツ] の高さ全体) まで表示することをお勧めします。

サイドバーに設定しようとheight: 100%しましたが、Chrome では目に見える効果がありませんでした。誰でもこれを達成する方法を見ることができますか?

4

2 に答える 2

10

構造と要素のクラス/ID を少し変更しました。

<div class="container-fluid">
    <div class="row-fluid header">
        [Header content]
    </div>

    <div id="parent" class="row-fluid">
        <div class="span9 main-content">
                [Main Content]
        </div>
        <div id="right-sidebar" class="span3">
            [Right Sidebar Content]
        </div>
    </div>
</div>

そして今、CSS:

#parent{
  position: relative
}

#right-sidebar{
  position: absolute;
  right: 0;
  height: 100%;
  background: blue;
}

.main-content{
  background: red;
}
于 2013-02-02T19:57:49.013 に答える
2

周囲のコンテナには高さプロパティが必要なため、高さ 100% は機能しません。

コンテナーに 800px などの高さを設定して、高さを 100% 有効にすることができます。ただし、これはメインコンテンツと同等にするものではなく、見た目がそれほど変わらないようにする方法です。

display: table; を利用できます。テーブルのような列の場合。http://jsbin.com/ojavub/1/edit

#right-sidebar {
  background-color: red;
  display: table-cell;
}

.container {
  display: table;
}

.row-fluid {
  display: table-row;
}
于 2013-02-02T19:50:31.680 に答える