Bootstrap 3 フルハイト列: カスタム CSS ソリューション

概要:

作成Twitter Bootstrap 3 でのフルハイトのレイアウトは難しい場合があります。 Bootstrap のネイティブ クラスはこの機能をサポートしていませんが、カスタム CSS を使用してこの効果を実現できます。

カスタム CSS アプローチ:

1. 設定100% 高さ:
   ボディ、コンテナ、および行要素の高さを 100% に設定して、それらが完全な高さにまたがるようにします。ビューポート。
2. テーブルとして表示:
   display: table を使用してコンテナ要素をテーブルに変換します。これにより、コンテナの内容を表構造に配置できます。
3. Floating Cell:
   no-float などのカスタム クラスをナビゲーション列に追加します。このクラスに、display: table-cell および float: none を設定します。これにより、ナビゲーション列がフローティングになるのを防ぎ、コンテンツ列と垂直方向に整列できるようになります。

Markup:

Header

    

        
Navigation
        
Content
    

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

利点と考慮事項:

• このカスタム CSS ソリューションは、Bootstrap 3 と互換性のあるフルハイトのレイアウトを提供します。
• ナビゲーションとコンテンツの比率 1:3 は、CSS の列幅を変更することで調整できます。
• ただし、それは競合を避けるために、Bootstrap のネイティブ列クラスを変更するのではなく、カスタム クラス (no-float など) を使用することが重要です。