Bootstrap: Tüm kabı navbar eksi navbar yüksekliğinin altına doldurun

Twitter Bootstrap ile biçimlendirilmiş bir sayfada ve navbar'u kullanarak tüm kapsayıcıyı gezinme çubuğunun altında bir Google Haritalar haritasıyla doldurmak istedim. Aşağıda CSS'yi eklediğimi gerçekleştirmek için.Bootstrap: Tüm kabı navbar eksi navbar yüksekliğinin altına doldurun

html ve body öğelerini boyutlarını% 100 olarak tanımlarım, böylece haritanın boyut tanımı için kullanılır. Ancak, bu çözüm bir sorun çıkarmaktadır:

Haritanın yüksekliği artık tüm sayfa yüksekliğiyle aynı, bu da kaydırma çubuğunun 40px'e kaydırılabilen bir kaydırma çubuğuyla sonuçlanmasını sağlıyor. Haritanın boyutunu gezinme çubuğunun 100% - 40px'a nasıl ayarlayabilirim?

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

#map img { 
     max-width: none; 
} 

html, body { 
     height: 100%; 
     width: 100%; 
} 

.fill { 
     height: 100%; 
     width: 100%; 
} 

.navbar { 
     margin-bottom: 0; 
}

Bütünlüğü için HTML:

<!DOCTYPE html> 
<html lang="en"> 
     <head> 
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
       <!-- Stylesheets --> 
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
       <link rel="stylesheet" type="text/css" href="css/core.css"> 
     </head> 
     <body> 
       <div class="navbar"> 
         <div class="navbar-inner"> 
         </div> 
       </div> 
       <div class="container fill"> 
         <div id="map"> 
         </div> 
       </div> 
     </body> 
</html>

kaynak

2012-08-13 Mahoni

Sen mutlak konumlama ile sorunu çözebilir.

.fill { 
    top: 40px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position: absolute; 
    width: auto; 
    height: auto; 
}

Demo (jsfiddle)

Ayrıca navbar .navbar-fixed-top yapmak ve bir şekilde #map öğenin içinde bir dolgu veya marjı ekleyebilir.

kaynak

2012-08-13 08:47:43 Sherbrow

Doğru, bu şekilde, uygulamanın Bootstrap mutlak konumlandırılmış harita divı üzerinden menüyü değiştirdiği için artık yanıt vermiyor mu? –

@ JürgenZornig Duyarlılık mutlak bir durum değildir. Bu, düzeniniz için daha küçük/geniş ekranlarda çalışırsa, o zaman yanıt verir. Değilse, birkaç medya sorgusuna atınız ve ihtiyaçlarınızı karşılayınız. – Sherbrow

Evet, size katılıyorum, ancak bir Div mutlak üst 40px'i konumlandırırsam, navbar menüsünü açtığımda daha küçük ekranlarda standart önyükleme menüsü davranışı div'ımla çakışır. Üzgünüz, bu cevabı bulmak istedim, düzen gereksinimlerime uyuyor. Sadece başka bir şekilde çözdünüz (Pozisyon: statik) –

Bootstrap: Tüm kabı navbar eksi navbar yüksekliğinin altına doldurun

cevap

İlgili konular