Twitterブートストラップ3 2列の全高

twitterブートストラップ3で2列のフルハイトレイアウトを作成しようとしています。twitterブートストラップ3はフルハイトレイアウトをサポートしていないようです。私がしたいこと：

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

コンテンツが増えると、ナビゲーションも増えるはずです。

• コンテンツが1行の場合があるため、すべての親の高さ100％は機能しません。
• 絶対位置は間違っているようです
• display: tabledisplay:table-cell問題を解決しますが、エレガントではありません

html：

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

デフォルトのTwitterブートストラップ3クラスで作成する方法はありますか？

編集： ではブートストラップ4、ネイティブクラスができるフルハイト列（生産DEMOを、彼らが変更されたため）そのグリッドシステムをフレキシボックスに。（Bootstrap 3について読む）

Bootplyデモ / Codepen

マークアップ：

<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（Navigation：Content）を実現します -（ブートストラップのデフォルトクラス：col-mdによる） -3およびcol-md-9）

注意：

1）ではない私たちのような別のクラスを追加し、ブートストラップのネイティブ列クラスまで混乱するためには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の比率が必要な場合-ブートストラップのcol-md- *クラスをマークアップから削除することをお勧めします。これは、その使用方法ではないためです。

Codepenデモ

あなたはpadding-bottom: 100%; margin-bottom: -100%;トリックであなたが望むものを達成することができます、あなたはこのフィドルで見ることができます。

私はあなたのHTMLを少し変更しますが、次のコードであなた自身のHTMLで同じ結果を得ることができます

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

純粋なCSSソリューション

フィドル

CSS2.1のみを使用し、すべてのブラウザー（IE8 +）で動作し、 、高さや幅を指定せずに。

つまり、ヘッダーが急に長くなる場合、または左のナビゲーションを拡大する必要がある場合、何も修正する必要はありません。あなたのCSSインチ

完全に応答性が高く、シンプルでわかりやすく、管理が非常に簡単です。

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

説明： 容器divは体の高さ100％を占め、彼は2つのセクションに分かれています。ヘッダーセクションは必要な高さまでHeightTaker広がり、残りは残ります。それはどのように達成されますか？高さ100％でコンテナの横に空の要素をフロートし（を使用:before）、HeightTaker最後に空の要素にクリアルールを指定します（を使用:after）。その要素はフロート要素と同じ行にあることができないので、彼は最後まで押されます。これはまさにドキュメントの100％です。

これでHeightTaker、特定の高さ/マージンを指定せずに、スパンをコンテナの残りの高さにします。

その中HeightTakerで、マイナーな変更で通常のフロートレイアウトを構築します（表示のような列を実現するため）。高さを機能させるWrapperために必要な要素があります100%。

更新

これがBootstrapクラスのデモです。（私はあなたのレイアウトに1つのdivを追加しました）

デフォルトのブートストラップ動作を変更しない微妙な変更について考えました。そして、私はそれが必要なときだけそれを使うことができます：

.table-container {
  display: table;
}

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

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

だから私はこのようにそれを使うことができます：

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

私の知る限り、これを達成するために最大5つの方法を使用できます。

1. CSS表示テーブル/テーブルセルプロパティの使用、または実際のテーブルの使用。
2. ラッパー内で絶対配置要素を使用します。
3. フレックスボックスの表示プロパティを使用するが、現在のところ、まだ部分的にサポートされている
4. 偽の列の手法を使用して、列全体の高さをシミュレートします。
5. パディング/マージンテクニックを使用します。例を参照してください。

ブートストラップ：あまり経験がありませんが、そのためのスタイルを提供しているとは思いません。

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

モダンで非常にシンプルなソリューション：

HTML：

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

CSS：

.row{
    display: flex;
}

純粋なCSSソリューションは十分に簡単で、魅力的なクロスブラウザーのように機能します。

大きなパディングと同じくらい大きな負のマージンをnav列とcontent列に追加し、オーバーフローを非表示にしてクラスの行をラップします。
ライブビュー
編集ビュー

HTML

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}  

幸運を！

ソリューションは2つの方法で実現できます

1. display：tableとdisplay：table-cellの使用
2. パディングと負のマージンを使用します。

上記のソリューションを取得するために使用されるクラスは、ブートストラップ3では提供されていません。display：tableおよびdisplay：table-cellは、HTMLでテーブルを使用する場合にのみ指定されます。負のマージンとパディングクラスもありません。

したがって、これを実現するにはカスタムCSSを使用する必要があります。

以下は最初の解決策です

HTMLコード：

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

対応するCSS：

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

以下は2番目の解決策です

HTMLコード：

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

対応するCSS：

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

OK、Bootstrap 3.0を使用して同じことを達成しました

最新のブートストラップの例

http://jsfiddle.net/HDNQS/1/

HTML：

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

SCSS：

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

だから、あなたの最善の選択肢はpadding-bottom、否定的に対抗することですmargin-bottom戦略です。

2つの例を作成しました。1つは<header> 内側 .containerにあり、もう1つは外側にありますます。

どちらのバージョンも正しく動作するはずです。次の@mediaクエリを使用して、小さい画面の余分なパディングを削除することに注意してください...

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

それ以外は、これらの例で問題が解決するはずです。

あなたが心配しているのが色を置くことだけなら、これを行うはるかに簡単な方法があります。

これを最初または最後にbodyタグに入れます

<div id="nfc" class="col col-md-2"></div>

そしてこれはあなたのCSSに

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

形状を作成し、ページの後ろに固定して、完全な高さに伸ばすだけです。既存のブートストラップクラスを利用することで、適切な幅が得られ、応答性が維持されます。

このメソッドofcにはいくつかの制限がありますが、ページのルート構造の場合は、それが最善の答えです。

完全な幅と高さのテーブルを作成するために、Bootstrapと互換性のある簡単なCSSを書きました。

フィドル： https //jsfiddle.net/uasbfc5e/4/

原則は次のとおりです。

• メインDIVに「tablefull」を追加する
• 次に暗黙的に、以下のDIVは行を作成します
• 行の下のDIVはセルになります
• ヘッダーなどに「tableheader」クラスを使用できます

HTML：

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

CSS：

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

試す

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

.fillクラスのCSSは以下です

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

ご参考までに、フィドルをご覧ください。

これを試して

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

訪問 http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

シドのおかげで

行の後にコンテンツがない場合（画面全体の高さが取得される）、position: fixed; height: 100%for .col:before要素を使用したトリックがうまく機能する可能性があります。

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

これは相殺に関してはここでは言及されていません。

左サイドバーの配置には絶対を使用できます。

CSS

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

HTML

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

これを試して

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

これはBootstrap 3を使用しているため、追加のCSSなどは必要ありません...

ブートストラップの接辞を見ましたか JAvascriptのセクションでか???

私はそれが最善で最も簡単な解決策だと思います。

ご覧ください：http : //getbootstrap.com/javascript/#affix

ここに提供されたコードで実験した後： Bootstrap Tutorial

ここに最新のブートストラップを使用した別の選択肢があります v3.0.2次に示します。

マークアップ：

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

追加のCSS：

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

JSFiddleのサンプル

これが興味のある人に役立つことを願っています。