web-gelistirme-sc.com

Twitter Bootstrap:% 100 yüksekliğe sahip kap içinde div

Twitter bootstrap (2) kullanarak, bir gezinme çubuğuna sahip basit bir sayfam var ve container içinde% 100 yüksekliğe sahip bir div eklemek istiyorum (ekranın altına). Css-fu'm paslanmış 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>

Geçerli CSS:

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

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}
  • DÜZENLE *

Aşağıda önerildiği gibi dolgu sınıfına yükseklik ekledim. Fakat sorun şu ki, üstte sabit bir navbarı hesaba katacak gövdeye bir dolgu-üst ekliyorum. Bu "harita" div'nin% 100 yüksekliğini etkiler ve kaydırma çubuğunun ekleneceği anlamına gelir - burada görüldüğü gibi: http://jsfiddle.net/S3Gvf/2/ Biri bana nasıl düzelteceğimi söyleyebilir mi ?

116
Matt Roberts

.fill sınıfını height: 100% olarak ayarlayın

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

JSFiddle

(#map için kırmızı bir arka plan koydum, böylece% 100 yüksekliğe ulaştığını görebilirsiniz)

117
Horen

2018 Güncellemesi

Bootstrap 4 içinde flexbox, kalan alanı dolduran bir tam yükseklik düzeni elde etmek için kullanılabilir.

Her şeyden önce, kabın (parent) tam yükseklikte olması gerekir:

Seçenek 1_ min-height: 100%; için bir sınıf ekleyin. Ebeveyn belirli bir yüksekliğe sahipse, minimum yüksekliğin sadece çalışacağını unutmayın:

html, body {
  height: 100%;
}

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

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

Seçenek 2_ vh ünitesini kullanın:

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

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

Ardından, kapta flexbox yön sütunu d-flex flex-column ve kapsayıcısında flex-grow-1 kullanın çocuk divs (yani: row) Kalan yüksekliği doldurmak için.

Ayrıca bakınız:
Bootstrap 4 Navbar ve içerik doldurma yüksekliği flexbox
Önyükleme - Üstbilgi ve altbilgi arasındaki sıvı kabını doldurun
Önyükleme 4: Satırın kalan yüksekliği uzatması nasıl yapılır?

21
Zim

O çok basit. Kullanabilirsiniz

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

İhtiyacınıza göre yüksekliği değiştirebilirsiniz.

1

"dolgu" elemanına doldurma üstü eklemeniz gerekir, ayrıca kutu-boyutlandırma eklemelisiniz: border-box - burada örnek bootply

1
mamezito