Solución:
Establecer la clase .fill para height: 100%
.fill {
min-height: 100%;
height: 100%;
}
JSFiddle
(Pongo un fondo rojo para #map para que pueda ver que ocupa el 100% de altura)
Actualización 2019
En Bootstrap 4, flexbox se puede utilizar para obtener un lleno diseño de altura que llena el espacio restante.
Primero que nada, el contenedor (padre) debe ser de altura completa:
Opción 1_ Agregar una clase para min-height: 100%;. Recuerde que la altura mínima solamente funciona si el padre tiene una altura definida:
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
https://codeply.com/go/dTaVyMah1U
Opción 2_ Uso vh unidades:
.vh-100 {
min-height: 100vh;
}
https://codeply.com/go/kMahVdZyGj
También de Bootstrap 4.1, el vh-100 y min-vh-100 Las clases están incluidas en Bootstrap, por lo que no es necesario el CSS adicional.
Luego, use la columna de dirección de flexbox d-flex flex-column en el contenedor, y flex-grow-1 en cualquier niño divs (es decir: row) que desea llenar la altura restante.
Ver también:
Bootstrap 4 Navbar y flexbox de altura de relleno de contenido
Bootstrap: llene el contenedor de líquido entre el encabezado y el pie de página
Cómo hacer que la fila se estire la altura restante
Es muy simple. Puedes usar
.fill .map
{
min-height: 100vh;
}
Puede cambiar la altura según sus necesidades.