Bootstrap: llene todo el contenedor debajo de la barra de navegación menos la altura de la barra de navegación

En una página diseñada con Twitter Bootstrap y usando la barra de navegación Quería llenar todo el contenedor debajo de la barra de navegación con un mapa de Google Maps. Para lograrlo, he agregado el siguiente CSS.Bootstrap: llene todo el contenedor debajo de la barra de navegación menos la altura de la barra de navegación

Defino para los elementos html y body los tamaños al 100% para que esto se use para la definición del tamaño del mapa. Esta solución, sin embargo, produce un problema:

La altura del mapa ahora es la misma que la altura de toda la página, lo que da como resultado una barra de desplazamiento que puedo desplazar para los 40px que agrega la barra de navegación. ¿Cómo puedo establecer el tamaño del mapa en 100% - 40px de la barra de navegación?

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

Para completar el código 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>

Fuente

2012-08-13 Mahoni

Usted podría resolver el problema con el posicionamiento absoluto.

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

Demo (jsfiddle)

También puede hacer que la barra de navegación y de alguna manera .navbar-fixed-top añadir un relleno o margen dentro del elemento #map.

Fuente

2012-08-13 08:47:43 Sherbrow

¿Estoy en lo cierto, de esta manera, la aplicación ya no responde, cuando Bootstrap cambia su menú sobre el div de mapa absoluto? –

@ JürgenZornig La receptividad no es un estado absoluto. Si esto funciona para su diseño en pantallas más pequeñas/más amplias, entonces es receptivo. De lo contrario, incluya un par de consultas en los medios y ajústelo a sus necesidades. – Sherbrow

Sí, estoy de acuerdo contigo, pero si ubico un Div absoluto top 40px, el comportamiento del menú de arranque estándar en pantallas más pequeñas se superpondrá a mi div cuando abra el menú de la barra de navegación. Lo siento, solo quería saber si esta respuesta se ajusta a mis necesidades de diseño. Acabo de resolverlo de otra manera (con Posición: estático) –

Bootstrap: llene todo el contenedor debajo de la barra de navegación menos la altura de la barra de navegación

Respuesta

Cuestiones relacionadas