css - pantalla - Haga que el div anidado se extienda hasta el 100% de la altura div del contenedor restante

height css

Question

Tengo un div contenedor, que quiero estirar al menos toda la altura de la ventana. Si hay mucho contenido en el div contenedor, quiero que se extienda más allá de la altura de la ventana. Esto funciona.

En el contenedor div tengo una imagen. Después / debajo de la imagen, tengo un segundo div. Quiero que este div anidado se extienda verticalmente para llenar el espacio restante del contenedor div. Esto no funciona.

He tratado de ilustrar el problema en esta imagen . Quiero que el div se extienda de la manera ilustrada en el lado izquierdo de la imagen derecha, no como se ve en el lado derecho de la imagen derecha.

El siguiente es mi código. Como puede ver, en este código no trato de hacer que la división bajo la imagen se extienda verticalmente, ya que nada ha funcionado. "Altura: 100%" no funciona, ya que he definido que "100%" es la altura de la ventana por defecto, para que el div contenedor se extienda al menos hasta la altura de la ventana.

Estilo:

* { 
  margin: 0; padding: 0;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

body, html { 
  height: 100%;
}

.container {
  display: block;
  overflow: auto;
  min-height: 100%;
  height: 100%;
  height: auto;
}

.bottom {
  width: 100%;
}

HTML:

<div class="container">

<img  src="image.jpg" width="100%">

<div class="bottom">
LOREM IPSUM
</div>

</div>

Answer 1

He pasado demasiado tiempo tratando de resolverlo, ¡pero por George lo tengo!

El momento "Eureka" fue leer otras preguntas donde las personas preguntaban "¿cómo puedo hacerlo sin usar tablas?" Porque por supuesto este diseño es fácil con tablas. Pero eso me hizo pensar en la display:table .

Como bien se argumenta en esta publicación del blog , el uso de display:table le da diseños de tablas sin la sobrecarga de marcado desagradable como diseños de tablas HTML, lo que le permite tener código semántico y diferentes diseños para diferentes consultas de medios.

Terminé teniendo que hacer un cambio en el marcado: una envoltura <div> alrededor de la imagen. Además, las alturas máximas / mínimas son todas extrañas cuando se trata de visualizaciones de tablas : las configuraciones de height se tratan como alturas preferidas dadas las restricciones de los elementos primarios y secundarios. Así que al establecer una altura de cero en una display:table-row div de envoltura de la display:table-row hizo que esa fila se ajustara exactamente a la imagen del contenido. Al establecer una altura del 100% en la división de contenido, llenó bien el espacio entre la imagen y la altura mínima del contenedor principal.

Voila!

Condensando sólo el código esencial:

Margen:

<div class="container">
    <div class="wrapper">
        <img src="http://placekitten.com/600/250" />
    </div>
    <div class="bottom" contentEditable="true">
</div>

CSS:

body {
    overflow-y: scroll;
    overflow-x: hidden;
}
body, html {
    height: 100%;
}
.container {
    display: table;
    width: 100%
    height: 100%; /* this will be treated as a Minimum!
                     It will stretch to fit content */
}
div.wrapper{
    display:table-row;
    height:0px; /* take as little as possible, 
                   while still fitting content */
}
img {
    display:table-cell;
    width:100%; /*scale to fit*/
}
.bottom {
    display:table-cell;
    height:100%; /* take as much as possible */
}

Funciona en Firefox 25, Chrome 32, Opera 18 y IE10. No funciona en IE 8, pero entonces, ¿qué hace? No se ve roto en IE8, simplemente no se ajusta al ajuste.

Si puede probarlo en los navegadores Safari, IE9 o móviles, deje un comentario.

Answer 2

La forma no javascript es usar flexbox. Depende exactamente de muchos detalles, pero puedes jugar en http://the-echoplex.net/flexyboxes/ .

Polyfills existe, pero lo que se debe usar exactamente depende de los navegadores a los que se dirige.

Answer 3

Las cajas flexibles serán agradables, cuando sean ampliamente compatibles.

Aún mejor sería un cambio en la especificación, de modo que si especifica min-height en un padre, puede usar valores porcentuales para la min-height un objeto hijo, en lugar de requerir que el valor de la altura del padre se establezca explícitamente para la altura del niño Los porcentajes tienen algún significado. Pero yo divago...

Mientras tanto, el uso de "columnas falsas" puede obtener el efecto que desea. El concepto es simple: permite que el div niño tenga una altura automática, pero luego pinta el fondo del padre de manera que parezca que el fondo del div niño continúa hasta la altura máxima.

El ejemplo en ese enlace lo hace con una imagen de fondo, pero puedes usar un gradiente de fondo si no te importa sacrificar el soporte para Safari e IE9- . (Recordar que la falta de apoyo simplemente significa que no es muy bonito, todo es funcionalmente igual).

Ejemplo aquí:
http://fiddle.jshell.net/y6ZwR/3/