Usando twitter bootstrap (2), tengo una página simple con una barra de navegación, y dentro container
quiero agregar un div con un 100% de altura (en la parte inferior de la pantalla). Mi css-fu está oxidado, y no puedo resolver esto.
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%;
}
- EDITAR *
He agregado altura a la clase de relleno como se sugiere a continuación. Pero, el problema es que agrego un relleno superior al cuerpo para tener en cuenta la barra de navegación fija en la parte superior. Esto afecta el 100% de la 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?
css
twitter-bootstrap
height
Matt Roberts
fuente
fuente
Respuestas:
Establecer la clase
.fill
aheight: 100%
JSFiddle
(Puse un fondo rojo para
#map
que pueda ver que ocupa un 100% de altura)fuente
box-sizing:border-box;
en el elemento con el relleno (etiqueta del cuerpo) para una solución fácilActualización 2019
En Bootstrap 4 , flexbox se puede usar para obtener un diseño de altura completa que llene el espacio restante.
En primer lugar, el contenedor (padre) debe ser de altura completa:
Opción 1_ Agregar una clase para
min-height: 100%;
. Recuerde que la altura mínima solo funcionará si el padre tiene una altura definida:https://www.codeply.com/go/dTaVyMah1U
Opción 2_ Utilizar
vh
unidades:https://www.codeply.com/go/kMahVdZyGj
Luego, use la columna de dirección de flexbox
d-flex flex-column
en el contenedor yflex-grow-1
en cualquier división secundaria (es decir :)row
que desee llenar la altura restante.Consulte también:
Bootstrap 4 Barra de navegación y altura de relleno de contenido Flexbox
Bootstrap: llene el contenedor de fluido entre el encabezado y el pie de página
Cómo hacer que la fila se estire la altura restante
fuente
height:100%
no es simplemente consumir el resto de la altura inferior, sino que consume el 100% de la altura de la vista creando una barra de desplazamiento vertical. Es por eso que el mapa requiere desplazarse hasta el final en la respuesta aceptada.Es muy simple. Puedes usar
Puede cambiar la altura según sus necesidades.
fuente
necesita agregar padding-top al elemento "relleno", además de agregar box-sizing: border-box - muestra aquí bootply
fuente