Twitter bootstrap (2) kullanarak, bir nav çubuğu olan basit bir sayfam var ve container
içine %100 yüksekliğe sahip bir div eklemek istiyorum (ekranın altına). Css-fu'm paslı ve bunu çözemiyorum.
Basit 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>
Güncel CSS:
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
Aşağıda önerildiği gibi dolgu sınıfına yükseklik ekledim. Ancak sorun şu ki, üstteki sabit navbar'ı hesaba katmak için gövdeye bir padding-top ekliyorum. Bu, "map" div'in %100 yüksekliğini etkiliyor ve burada görüldüğü gibi bir kaydırma çubuğunun eklendiği anlamına geliyor:
Nasıl düzelteceğimi söyleyebilecek biri var mı?.fillsınıfını
height: 100%` olarak ayarlayın
.fill {
min-height: 100%;
height: 100%;
}
[JSFiddle][1]
(#map
için kırmızı bir arka plan koydum, böylece %100 yükseklik kapladığını görebilirsiniz)
Güncelleme 2019
Bootstrap 4*'te flexbox, kalan alanı dolduran tam* yükseklikte bir düzen elde etmek için kullanılabilir.
Her şeyden önce, konteynerin (ebeveyn) tam boy olması gerekir:
Seçenek 1_ min-height: 100%;
için bir sınıf ekleyin. Unutmayın ki min-height sadece ebeveynin tanımlı bir yüksekliği varsa çalışacaktır:
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
https://www.codeply.com/go/dTaVyMah1U
Seçenek 2_ vh
birimlerini kullanın:
.vh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/kMahVdZyGj
Ardından, kapsayıcı üzerinde flexbox yön sütunu d-flex flex-column
ve kalan yüksekliği doldurmak istediğiniz herhangi bir çocuk div'inde (yani: row
) flex-grow-1
kullanın.
Ayrıca bakınız:
https://stackoverflow.com/questions/49191957
https://stackoverflow.com/questions/15641142/
https://stackoverflow.com/questions/42194886/bootstrap-4-how-to-make-the-row-stretch-remaining-height/42195475#42195475