Twitter Bootstrap: div en contenedor con 100% de altura

129

Usando twitter bootstrap (2), tengo una página simple con una barra de navegación, y dentro containerquiero 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
1
¿Entonces solo quieres estirar ese div en todas las direcciones?
Andres Ilich
1
Sí, quiero que complete el espacio que queda después de la división de navegación
Matt Roberts

Respuestas:

129

Establecer la clase .fillaheight: 100%

.fill { 
    min-height: 100%;
    height: 100%;
}

JSFiddle

(Puse un fondo rojo para #mapque pueda ver que ocupa un 100% de altura)

Horen
fuente
Gracias, lo intentaré más tarde e informaré. No puedo creer que me perdí esa solución simple :)
Matt Roberts
2
Gracias, este tipo de trabajo funciona, pero el navegador de arranque de Twitter, que es una posición fija, hace que el mapa se salga de la parte inferior: debe desplazarse hacia la parte inferior. No sé cómo hacer que el div abarque todo el espacio de pantalla disponible MENOS la barra de navegación.
Matt Roberts
2
jsfiddle.net/S3Gvf/4 uso box-sizing:border-box;en el elemento con el relleno (etiqueta del cuerpo) para una solución fácil
Horen
1
No estoy muy seguro de cómo funciona ese vodoo css3, pero funciona :) ¡Muchas gracias!
Matt Roberts
1
El #map está realmente oculto detrás de la barra de navegación en este ejemplo.
Etéreo
37

Actualizació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:

html, body {
  height: 100%;
}

.min-100 {
    min-height: 100%;
}

https://www.codeply.com/go/dTaVyMah1U

Opción 2_ Utilizar vhunidades:

.vh-100 {
    min-height: 100vh;
}

https://www.codeply.com/go/kMahVdZyGj

Luego, use la columna de dirección de flexbox d-flex flex-columnen el contenedor y flex-grow-1en cualquier división secundaria (es decir :) rowque 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

Zim
fuente
¿Por qué parece que ambos enfoques son contrarios a la intuición de simplemente crear un segundo contenedor que ocupa el resto de la altura inferior de la ventana? Debe haber flexibilidad para que el desarrollador haga lo que quiera con bootstrap en el espacio dado anteriormente.
klewis
¿De verdad crees que esto merece un voto negativo? "simplemente creando un segundo contenedor que ocupa el resto de la altura inferior de la ventana" ... ¿tiene un ejemplo de cómo funcionaría eso? el punto completo 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.
Zim
usted es un desarrollador muy respetado en estos formularios para BootStrap. No te rechacé, alguien más lo hizo. Estoy sorprendido por su respuesta porque la mayoría de sus respuestas son altamente votadas. Desearía tener un ejemplo de cómo funcionó eso. Todavía no he encontrado nada, pero sería bueno si flexbox tuviera una manera fácil de llenar el resto de un elemento hacia la parte inferior de la página. Gracias por intentar dar una respuesta, supongo que estuvimos allí para implementarlo fácilmente. Supongo que no :)
klewis
1
Ok, como se indica en la respuesta "use la columna de dirección de flexbox d-flex flex-column en el contenedor, y flex-grow-1 en cualquier división secundaria (es decir: fila) que desee llenar la altura restante" ... padre es 100% de altura como se explicó
Zim
3

Es muy simple. Puedes usar

.fill .map 
{
  min-height: 100vh;
}

Puede cambiar la altura según sus necesidades.

Sumit Kumar Gupta
fuente
1

necesita agregar padding-top al elemento "relleno", además de agregar box-sizing: border-box - muestra aquí bootply

mamezito
fuente