web-dev-qa-db-ja.com

Twitterのブートストラップ:コンテナ内のdivの高さは100%

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%;
}
  • 編集*

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

112
Matt Roberts

クラス.fillheight: 100%に設定します

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

JSFiddle

(私は#mapの背景を赤にしているので、100%の高さになっているのがわかります)

113
Horen

アップデート2018

Bootstrap 4では、flexboxを使って残りのスペースを埋めるフルの高さのレイアウトを取得できます。

まず最初に、コンテナ(親)はフルハイトである必要があります。

オプション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を使用し、残りの高さを埋めるすべてのdiv(つまり:row)でflex-grow-1を使用します。

また見なさい:
ブートストラップ4ナビゲーションバーとコンテンツの塗りつぶしの高さのフレックスボックス
ブートストラップ - ヘッダーとフッターの間に液体コンテナを入れます
ブートストラップ4:行を残りの高さに伸ばすにはどうすればいいですか?

14
Zim

とても簡単です。あなたが使用することができます

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

あなたはあなたの条件に従って高さを変えることができます。

1

"fill"要素にpadding-topを追加し、さらにbox-sizingを追加する必要があります。border-box - ここにサンプルを書く bootply

1
mamezito