Bootstrap: Wypełnij cały kontener pod navbariem minus wysokość navbar'a

Na stronie zaprojektowanej za pomocą Twittera Bootstrapa i przy użyciu paska nawigacyjnego chciałem wypełnić cały kontener pod paskiem nawigacji mapą Google Maps. Aby to osiągnąć, dodałem poniższy CSS.Bootstrap: Wypełnij cały kontener pod navbariem minus wysokość navbar'a

Definiuję dla elementów html i body rozmiary na 100%, aby były używane do określenia rozmiaru mapy. To rozwiązanie daje jednak jeden problem:

Wysokość mapy jest teraz taka sama jak wysokość całej strony, co powoduje przewijanie paska, który można przewijać po 40 pikseli, które dodaje pasek nawigacyjny. Jak ustawić rozmiar mapy na 100% - 40px paska nawigacyjnego?

#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; 
}

Dla kompletności 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>

Źródło

2012-08-13 Mahoni

Można rozwiązać problem z pozycjonowania bezwzględnego.

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

Demo (jsfiddle)

Można również dokonać navbar .navbar-fixed-top i jakoś dodać dopełnienie lub margines wewnątrz elementu #map.

Źródło

2012-08-13 08:47:43 Sherbrow

Czy mam rację, że w ten sposób aplikacja nie reaguje już, ponieważ Bootstrap przełącza swoje menu nad div mapy pozycjonowanej absolutnie? –

@ JürgenZornig Responsywność nie jest stanem absolutnym. Jeśli działa to w twoim układzie na mniejszych/szerszych ekranach, oznacza to, że reaguje. Jeśli nie, podaj kilka zapytań o media i dostosuj je do swoich potrzeb. – Sherbrow

Tak, zgadzam się z tobą, ale jeśli ustawię absolutny górny 40px Div, standardowe zachowanie menu startowego na mniejszych ekranach będzie nakładać się na mój div, gdy otwieram menu na pasku nawigacyjnym. Przepraszam, chciałem tylko dowiedzieć się, jaka jest ta odpowiedź, odpowiadająca moim potrzebom w zakresie układu. Po prostu rozwiązano to w inny sposób (z Position: static) –

Bootstrap: Wypełnij cały kontener pod navbariem minus wysokość navbar'a

Odpowiedz

Powiązane problemy