Twitterブートストラップ：高さ100％のコンテナー内のdiv

129

twitterブートストラップ（2）を使用して、ナビゲーションバーのある単純なページを作成し、内部にcontainer高さ100％のdiv（画面の下部）を追加したいと思います。私のcss-fuは錆びており、これを解決することはできません。

シンプルなHTML：

<body>
  <div class="navbar navbar-fixed-top">
   <!-- Rest of nav bar chopped from here -->
  </div>
  <div class="container fill">
    <div id="map"></div> <!-- This one wants to be 100% height -->
  </div>
</body>

現在のCSS：

#map {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

編集*

以下に示すように、フィルクラスに高さを追加しました。しかし、問題は、上部に固定されたナビゲーションバーを考慮して、ボディにパディングトップを追加することです。これは「マップ」divの100％の高さに影響し、スクロールバーが追加されることを意味します-http: //jsfiddle.net/S3Gvf/2/次のように修正方法を教えてもらえますか？

css twitter-bootstrap height

— マット・ロバーツ
ソース

1

それで、あなたはそのdivをすべての方向に伸ばしたいだけですか？

— Andres Ilich

1

はい、ナビゲーションdivの後に残ったスペースを埋めたいのですが

— Matt Roberts

129

クラス.fillをheight: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

（#map高さ100％を占めるように、赤い背景を付けました）

— ほうれん
ソース

よろしくお願いします。後で試して、また報告します。その単純な修正を見逃したなんて信じられません:)

— Matt Roberts

2

おかげで、この種の作品ですが、位置が固定されているTwitterのブートストラップナビゲーションにより、マップが下から外れます。下にスクロールする必要があります。divを、利用可能な全画面スペースからナビゲーションバーを差し引いたものにする方法がわかりません。

— マット・ロバーツ

2

jsfiddle.net/S3Gvf/4がbox-sizing:border-box;簡単な回避策のためにパディング（bodyタグ）を持つ要素で使用

— Horen

1

そのcss3 voodooがどのように機能するかはよくわかりませんが、機能します:)ありがとうございました！

— マットロバーツ

1

この例では、＃mapは実際にはナビゲーションバーの背後に隠れています。

— Ethereal、2013年

37

2019年更新

ではブートストラップ4、フレキシボックスを取得するために使用することができ、完全な残りのスペースを埋める高さのレイアウトを。

まず、コンテナ（親）は完全な高さである必要があります。

オプション1_のクラスを追加しmin-height: 100%;ます。min-heightは、親に高さが定義されている場合にのみ機能することに注意してください。

html, body {
  height: 100%;
}

.min-100 {
    min-height: 100%;
}

https://www.codeply.com/go/dTaVyMah1U

オプション2_ vh単位を使用：

.vh-100 {
    min-height: 100vh;
}

https://www.codeply.com/go/kMahVdZyGj

その後、使用フレキシボックス方向列d-flex flex-columnコンテナ上、およびflex-grow-1任意の上の子のdiv（すなわち：row）あなたは残りの高さを埋めるためにしたいということ。

参照：
Bootstrap 4 Navbarとコンテンツフィルの高さflexbox
ブートストラップ-ヘッダーとフッターの間に液体コンテナを充填
 する行を残りの高さに伸ばす方法

— ジム
ソース

これらのアプローチの両方が、ウィンドウの下部の残りの高さを占める2つ目のコンテナーを作成するだけでは直観に反するように見えるのはなぜですか？上記の特定のスペースでは、開発者がブートストラップを使用して好きなように実行できる柔軟性が必要です。

— クレウィス

これは本当に反対票に値すると思いますか？「ウィンドウの下部の残りの高さを占める2番目のコンテナを作成する」..それがどのように機能するかについての例はありますか？ポイント全体height:100%は、下部の高さの残りを消費するだけではなく、ビューポートの高さの100％を消費して、垂直スクロールバーを作成します。そのため、マップは受け入れられた回答の下部までスクロールする必要があります。

— ジムジュン

あなたは、BootStrapのこれらのフォームで高く評価されている開発者です。私はあなたに反対票を投じなかった、他の誰かがそうした。あなたの回答のほとんどが非常に投票されているので、私はちょうどあなたの回答に驚いています。それがどのように機能するかの例があったらいいのに。まだ何も見つかりませんでしたが、フレックスボックスにページの下部に向かって要素の残りの部分を埋める簡単な方法があればいいでしょう。答えを出してくれてありがとう、私はこれを簡単に実装することができたと思います。私はそうは思いません:)

— クレウィス

1

回答で述べたように、「コンテナでフレックスボックスの方向列d-flexフレックス列を使用し、残りの高さを埋めるすべての子div（つまり行）でflex-grow-1」を使用します...説明されているように、親は100％の高さ

— Zim

3

とてもシンプルです。使用できます

.fill .map 
{
  min-height: 100vh;
}

必要に応じて高さを変更できます。

— スミットクマールグプタ
ソース

1

「fill」要素にpadding-topを追加し、さらにbox-sizing：border-boxを追加する必要があります-サンプルはここbootply

— まめじと
ソース