Twitter Bootstrap: kapsayıcısında% 100 yükseklikle div

Twitter bootstrap (2) kullanarak, nav çubuklu basit bir sayfam var ve container'un içine bir div eklemek istiyorum. ekran). Css-fu'm paslı ve ben bunu çözemiyorum.Twitter Bootstrap: kapsayıcısında% 100 yükseklikle div

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: Aşağıda önerilen gibi dolgu sınıfına yüksekliği ekledik *

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

html, body { 
    height: 100%; 
} 

.fill { 
    min-height: 100%; 
}

DÜZENLEME. Ancak sorun, üstte sabit navbarın hesaba katılması için vücuda bir dolgu malzemesi eklenmesi. Bu, "harita" div'in% 100 yüksekliğini etkiler ve burada görüldüğü gibi, bir kaydırma çubuğu eklenir anlamına gelir: http://jsfiddle.net/S3Gvf/2/ Birisi bana nasıl düzeltileceğini söyleyebilir mi?

kaynak

2012-07-26 Matt Roberts

Yani sadece bu yöne her yöne germek mi istiyorsunuz? –

Evet, nop div –

Seti sınıf .fillheight: 100%

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

JSFiddle

Sizin dolgu eklemeniz gerekir

kaynak

2012-07-26 21:07:16 Horen

'dan sonra kalan alanı doldurmak istiyorum. Teşekkürler, bunu daha sonra dener ve rapor eder. Bu basit düzeltmeyi özlediğime inanamıyorum :) –

Teşekkürler, bu tür işler, ama sabit konumdaki twitter bootstrap nav, haritayı alttan aşağı kaydırır - aşağıya kaydırmanız gerekir. Mümkün olan tüm ekran boşluğuna div alanını nasıl kullanacağımı bilmiyorum. –

navbarınızı jsfidlle'a ekleyebilir, böylece sorunu görebilir miyim? – Horen

(Ben bu yüzden% 100 yükseklik kaplıyor görebilirsiniz #map için kırmızı arka plan koymak) öğeyi "doldurmak" için, artı kutu boyutlandırma ekleyin: kenarlık kutusu - örnek burada bootply

kaynak

2015-08-17 13:34:33 mamezito

Twitter Bootstrap: kapsayıcısında% 100 yükseklikle div

cevap

İlgili konular