css - examples - div responsive bootstrap
Twitter Bootstrap: div en contenedor con 100% de altura (3)
Establezca la clase .fill en height: 100%
.fill {
min-height: 100%;
height: 100%;
}
( #map un fondo rojo para #map para que pueda ver que ocupa el 100% de altura)
Usando twitter bootstrap (2), tengo una página simple con una barra de navegación, y dentro del container quiero agregar un div con 100% de altura (en la parte inferior de la pantalla). Mi css-fu está oxidado, y no puedo resolverlo.
HTML simple:
<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>
CSS actual:
#map {
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
- EDIT *
He agregado altura a la clase de relleno como se sugiere a continuación. Pero, el problema es que agrego un relleno al cuerpo para dar cuenta de la barra de navegación fija en la parte superior. Esto afecta al 100% de altura del div "mapa" y significa que se agrega una barra de desplazamiento, como se ve aquí: http://jsfiddle.net/S3Gvf/2/ ¿Alguien puede decirme cómo solucionarlo?
necesitas agregar relleno para "llenar" el elemento, además de agregar tamaño de caja: border-box - sample here bootply
Actualización 2018
En Bootstrap 4 , flexbox se puede usar para obtener un diseño de altura completa que llena el espacio restante.
En primer lugar, el contenedor debe estar lleno de altura:
Opción 1_ Agregue una clase para min-height: 100%; . Recuerde que la altura mínima solo funcionará si el padre tiene una altura definida:
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
https://www.codeply.com/go/dTaVyMah1U
Opción 2_ Usar unidades vh :
.vh-100 {
min-height: 100vh;
}
https://www.codeply.com/go/kMahVdZyGj
Luego, use la columna de dirección flexbox d-flex flex-column en el contenedor, y flex-grow-1 en cualquier divs secundario (es decir, row ) que desee para completar la altura restante.
Ver también: Bootstrap 4 Navbar y FlexBank de altura de relleno de contenido