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/ 誰かが修正方法を教えてもらえますか？

csstwitter-bootstrapheight
112
Matt Roberts

クラス.fillをheight: 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
Sumit Kumar Gupta

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

1
mamezito