[解決済み】Bootstrap 3 2カラムフルハイト

質問

2カラムの フルハイト レイアウトをTwitter Bootstrap 3で作成しました。どうやら Twitter Bootstrap 3 は、フルハイトレイアウトをサポートしていません。 やりたいこと

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

コンテンツが大きくなると nav も大きくなるはずです。

• コンテンツが1行の場合があるため、すべての親の高さを100%にすることはできません。
• position: absolute は間違った方法だと思われます。
• display: table と display: table-cell は問題を解決してくれますが、エレガントではありません。

HTMLです。

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

デフォルトの Twitter Bootstrap 3 クラスはありますか？

解決方法は？

編集する。 で ブートストラップ4 , ネイティブクラス 可能 はフルハイトのカラムを生成します ( デモ を変更したためです。 グリッドシステム をフレックスボックスに変更しました。(Bootstrap3についてはこちらをお読みください)

---

Bootstrap 3.0のネイティブクラスは、あなたが説明したようなレイアウトをサポートしていませんが、いくつかのカスタムCSSを統合することができます。 cssテーブル を使えば実現できます。

ブートプライ・デモ / コードペン

マークアップ

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(関連）CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

上記のコードで実現するのは フルハイトカラム (追加したカスタム css-table プロパティによる) と 比率1:3 (ナビゲーション:コンテンツ)の 中画面幅 以上 - (ブートストラップのデフォルトクラス: col-md-3 と col-md-9 が原因です)

NB:

1) bootstrapのネイティブのカラムクラスを混乱させないために、次のような別のクラスを追加します。 no-float をマークアップに設定し display:table-cell と float:none をこのクラスで使用します (カラムクラスそのものではありません)。

2) もし、特定のブレイクポイント（例えば、ミディアムスクリーン幅以上）でのみcss-tableコードを使用し、モバイルスクリーンでは通常のブートストラップの動作に戻したい場合は、カスタムCSSをメディアクエリーでラップすることが可能です。

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepenデモ

これで、小さい画面では、カラムはデフォルトのブートストラップのカラムのように動作します（それぞれが全幅になります）。

3) もし1:3の比率がすべての画面幅で必要なら、bootstrapのcol-md-*クラスはマークアップから削除した方がいいでしょうね。

コードペンのデモ