Twitter Bootstrap:% 100 yüksekliğe sahip kapsayıcıda div

129

Twitter önyüklemesini (2) kullanarak, gezinme çubuğu olan basit bir sayfam var ve içine container% 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>

Mevcut 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. Ancak sorun şu ki, üst kısımdaki sabit gezinme çubuğunu hesaba katmak için gövdeye bir dolgu üstü ekliyorum. Bu, "map" div'in% 100 yüksekliğini etkiler ve burada görüldüğü gibi bir kaydırma çubuğunun eklendiği anlamına gelir: http://jsfiddle.net/S3Gvf/2/ Biri bana nasıl düzeltebileceğimi söyleyebilir mi?

css twitter-bootstrap height

— Matt Roberts
kaynak

1

Yani bu div'i her yöne doğru uzatmak mı istiyorsunuz?

— Andres Ilich

1

Evet, nav div'den sonra kalan boşluğu doldurmasını istiyorum

— Matt Roberts

129

Sınıf Set .filliçinheight: 100%

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

JSFiddle

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

— Horen
kaynak

Teşekkürler, bunu daha sonra deneyecek ve bize bildireceğim. Bu basit düzeltmeyi kaçırdığıma inanamıyorum :)

— Matt Roberts

2

Teşekkürler, bu tür işe yarıyor, ancak sabit konumdaki twitter önyükleme gezinmesi haritayı aşağıdan kaydırıyor - aşağıya kaydırmanız gerekiyor. Div aralığını tüm kullanılabilir ekran alanına nasıl ekleyeceğimi bilmiyorum EKSİ gezinti çubuğu.

— Matt Roberts

2

jsfiddle.net/S3Gvf/4box-sizing:border-box; , kolay bir çözüm için dolgu (gövde etiketi) ile öğede kullanın

— Horen

1

Bu css3 voodoo'nun nasıl çalıştığından pek emin değilim, ama işe yarıyor :) Çok teşekkürler!

— Matt Roberts

1

#Map aslında bu örnekte gezinme çubuğunun arkasında gizlenmiştir.

— Ethereal

37

2019 Güncellemesi

In Bootstrap 4 , FlexBox bir olsun kullanılabilecek tam kalan boşluğu doldurur yükseklik düzeni.

Her şeyden önce, kapsayıcı (üst) tam yükseklikte olması gerekir:

Seçenek 1_ için bir sınıf ekleyin min-height: 100%;. Minimum yüksekliğin yalnızca ebeveynin belirli bir yüksekliği varsa çalışacağını unutmayın :

html, body {
  height: 100%;
}

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

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

Seçenek 2_ vhBirimleri kullanın :

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

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

Sonra, kullanım FlexBox yönü sütun d-flex flex-columnambalaj üzerinde ve flex-grow-1herhangi bir çocuk div (yani: row) kalan yüksekliği doldurmak istiyorum.

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

— Zim
kaynak

Neden bu yaklaşımların her ikisi de, pencerenin alt yüksekliğinin geri kalanını kaplayan ikinci bir kap oluşturmak için neden mantıksız görünüyor? Yukarıda verilen alanda geliştiricinin önyükleme ile istediğini yapma esnekliği olmalıdır.

— klewis

Bunun bir olumsuz oyu hak ettiğini gerçekten düşünüyor musunuz? "sadece pencerenin alt yüksekliğinin geri kalanını kaplayan ikinci bir kap oluşturmak" .. bunun nasıl çalışacağına dair bir örnek var mı? tüm nokta, height:100%sadece alt yüksekliğin geri kalanını tüketmez, bunun yerine dikey bir kaydırma çubuğu oluşturarak görüntü alanı yüksekliğinin% 100'ünü tüketir. Bu nedenle, haritanın kabul edilen cevapta aşağıya inilmesi gerekir.

— Zim

BootStrap için bu formlarda saygın bir geliştiricisiniz. Ben size olumsuz oy vermedim, başkası verdi. Cevabınız beni şaşırttı çünkü cevaplarınızın çoğu yüksek oy aldı. Bunun nasıl çalıştığına dair bir örneğim olmasını isterdim. Henüz bir şey bulamadım, ancak flexbox'ın bir öğenin geri kalanını sayfanın altına doğru doldurmanın kolay bir yolu olsaydı iyi olurdu. Bir cevap vermeye çalıştığınız için teşekkürler, bunu kolayca uygulamak için orada olduğumuzu varsayıyorum. Sanırım değil :)

— klewis

1

Tamam, "kapsayıcıda flexbox yön sütunu d-flex flex-column kullanın ve kalan yüksekliği doldurmak istediğiniz tüm alt div'lerde (yani: satır) flex-Grow-1 kullanın" yanıtında belirtildiği gibi ... ebeveyn açıklandığı gibi% 100 boyda

— Zim

3

O çok basit. Kullanabilirsiniz

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

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

— Sumit Kumar Gupta
kaynak

1

"fill" öğesine padding-top eklemeniz, artı kutu boyutlandırma eklemeniz gerekir: border-box - buradan örnekle bootply

— mamezito
kaynak