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>
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) –