twitter bootstrap (2)を使って、ナビバーのあるシンプルなページがあるのですが、container
の中に高さ100%のdivを追加したいです(画面の一番下まで)。私のCSS技術は錆びついていて、これを解決することができません。
シンプルな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クラスにheightを追加しました。しかし、問題は、上部に固定されたナビバーを考慮し、ボディにpadding-topを追加することです。これは、"map" divの100%の高さに影響し、スクロールバーが追加されることを意味します - ここに見られるように:
誰か私に修正する方法を教えてください。2019年版更新
Bootstrap 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
を、残りの高さを埋めたい child div (例: row
) に flex-grow-1
を使用します。
こちらもご覧ください:<br>; https://stackoverflow.com/questions/49191957<br>; https://stackoverflow.com/questions/15641142/<br>; https://stackoverflow.com/questions/42194886/bootstrap-4-how-to-make-the-row-stretch-remaining-height/42195475#42195475