web-dev-qa-db-ja.com

Twitterのブートストラップ3 2列フルハイト

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

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

コンテンツが増えれば、ナビゲーションも増えます。

  • 内容が1行になる場合があるため、すべての親の身長100％が機能しない。
  • 絶対位置は間違った方法のようです
  • 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ブートストラップ3 classesで作る方法はありますか？

htmlcsstwitter-bootstrap
234
uladzimir

あなたはpadding-bottom: 100%; margin-bottom: -100%;トリックであなたが欲しいものを達成することができます、あなたは this /なぞなぞで見ることができますか。

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

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

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

純粋なCSSソリューション

Working Fiddle

CSS 2.1のみを使用して、高さや幅を指定せずに、すべてのブラウザ（IE 8 +）、 で作業します。

つまり、ヘッダーが突然長くなったり、左側のナビゲーションを大きくする必要がある場合は、CSSで anything を修正する必要はありません。

完全にレスポンシブ、シンプル＆クリア、そして非常に管理しやすい。

<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の中に（表示のような列を実現するために）通常のフローティングレイアウトを少し変更して構築します。100%の高さを機能させるのに必要なWrapper要素があります。

更新

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

38
avrahamcool

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

.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>
24
AndreDurao

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

  1. CSS表示テーブル/テーブルセルプロパティまたは実際のテーブルの使用.
  2. ラッパー内で絶対配置要素を使用する。
  3. Flexboxのdisplayプロパティを使用しますが、今日の時点ではまだ 部分サポート
  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;
}
8
Oriol

純粋な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; 
}

がんばろう！

6
David Taiaroa

解決策は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;
    }
5
user2594152

さて、私は 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;
}
4
VAShhh

ですから、padding-bottomを否定的なmargin-bottom戦略で打ち消すのがあなたの最善の選択肢であると思われます。

私は二つの例を作りました。 1つは<header>inside.container、もう1つはそれをoutsideです。

どちらのバージョンも正しく動作するはずです。以下の@mediaクエリの使用に注意してください。小さな画面で余分な余白が削除されます。

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

それ以外は、これらの例はあなたの問題を解決するはずです。

3
Giovanni Silveira

現代的で非常に単純な解決策：

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;
}
2
Nikolay Yenbakhtov

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

あなたの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にはいくつかの制限がありますが、それがページのルート構造に対するものである場合、それが最良の答えです。

2
Simon Stevens

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

Fiddle： 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;
}
2
Guillaume F.

これを試して

 <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/ にアクセスしてください。

Syedに感謝

1
Amol Shiledar

やってみる

<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%;

}

参考までに フィドルを見てください。

1
Krishna Rani Sahoo