Hacer que div (altura) ocupe la altura restante del padre

http://jsfiddle.net/S8g4E/

Tengo un contenedor divcon dos niños. El primer niño tiene una altura determinada. ¿Cómo puedo hacer que el segundo niño ocupe el "espacio libre" del contenedor divsin darle una altura específica?

En el ejemplo, el rosa divdebería ocupar también el espacio en blanco.

Similar a esta pregunta: ¿Cómo hacer que div ocupe la altura restante?

Pero no quiero dar una posición absoluta .

La expansión del #downniño para llenar el espacio restante #containerse puede lograr de varias maneras dependiendo de la compatibilidad del navegador que desee lograr y si tiene o no #upuna altura definida.

Muestras

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

Cuadrícula

El griddiseño de CSS ofrece otra opción, aunque puede que no sea tan sencillo como el modelo Flexbox. Sin embargo, solo requiere diseñar el elemento contenedor:

.container { display: grid; grid-template-rows: 100px }

los grid-template-rows define la primera fila como una altura fija de 100px, y las filas restantes se estirarán automáticamente para llenar el espacio restante.

Estoy bastante seguro de que IE11 requiere -ms-prefijos, así que asegúrese de validar la funcionalidad en los navegadores que desea admitir.

Flexbox

El módulo de diseño de caja flexibleflexbox de CSS3 ( ) ahora está bien soportado y puede ser muy fácil de implementar. Por ser flexible, funciona incluso cuando #upno tiene una altura definida.

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

Es importante tener en cuenta que el soporte de IE10 e IE11 para algunas propiedades de flexbox puede tener errores, e IE9 o inferior no tiene ningún soporte.

Altura calculada

Otra solución fácil es usar la unidad funcional CSS3calc , como señala Álvaro en su respuesta , pero requiere que la altura del primer niño sea un valor conocido:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

Tiene bastante soporte, con las únicas excepciones notables que son <= IE8 o Safari 5 (sin soporte) e IE9 (soporte parcial). Algunos otros problemas incluyen el uso de calc junto con transform o box-shadow , así que asegúrese de probar en varios navegadores si eso le preocupa.

Otras alternativas

Si se necesita un soporte más antiguo, puede agregar height:100%;para #downque el div rosa sea de altura completa, con una advertencia. Causará un desbordamiento del recipiente, porque lo #upestá empujando hacia abajo.

Por lo tanto, podría agregarlo overflow: hidden;al contenedor para solucionarlo.

Alternativamente, si la altura de #upes fija, puede colocarla absolutamente dentro del contenedor y agregarle una tapa acolchada #down.

Y otra opción más sería utilizar una pantalla de mesa:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

Han pasado casi dos años desde que hice esta pregunta. Se me ocurrió css calc () que resuelve este problema que tenía y pensé que sería bueno agregarlo en caso de que alguien tenga el mismo problema. (Por cierto, terminé usando la posición absoluta).

http://jsfiddle.net/S8g4E/955/

Aquí está el css

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

Y más información al respecto aquí: http://css-tricks.com/a-couple-of-use-cases-for-calc/

Soporte del navegador: http://caniuse.com/#feat=calc

Mi respuesta usa solo CSS y no usa overflow: hidden o display: table-row. Requiere que el primer niño realmente tenga una altura determinada, pero en su pregunta indica que solo el segundo niño debe tener su altura no especificada, por lo que creo que debería encontrar esto aceptable.

html

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

css

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

ver la demostración - http://jsfiddle.net/S8g4E/6/

usar css -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

A menos que lo esté entendiendo mal, puede agregar height: 100%;y overflow:hidden;para #down.

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

Demo en vivo

Editar: Dado que no desea utilizar overflow:hidden;, puede utilizar display: table;para este escenario; sin embargo, no se admite antes de IE 8. ( display: table;soporte )

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}​

Demo en vivo

Nota: ha dicho que desea que la #downaltura sea la #containeraltura menos la #upaltura. La display:table;solución hace exactamente eso y este jsfiddle lo retratará con bastante claridad.

Puede usar flotantes para empujar el contenido hacia abajo:

http://jsfiddle.net/S8g4E/5/

Tienes un contenedor de tamaño fijo:

#container {
    width: 300px; height: 300px;
}

Se permite que el contenido fluya junto a un flotador. A menos que establezcamos el flotador en ancho completo:

#up {
    float: left;
    width: 100%;
}

Mientras #upy #downcomparte la posición superior, #downel contenido de 'solo puede comenzar después de la parte inferior del flotante #up:

#down {
    height:100%;
}​

Resumen

No encontré una respuesta completamente satisfactoria, así que tuve que averiguarlo yo mismo.

Mis requisitos:

• el elemento debe ocupar exactamente el espacio restante, ya sea cuando el tamaño de su contenido es menor o mayor que el tamaño del espacio restante (en el segundo caso, se debe mostrar la barra de desplazamiento );
• la solución debería funcionar cuando se calcula la altura del padre y no se especifica ;
• calc()no debe usarse ya que el elemento restante no debe saber nada sobre otros tamaños de elementos;
• Se debe utilizar una técnica de diseño moderna y familiar , como cajas flexibles .

La solución

• Convierta en cajas flexibles todos los padres directos con la altura calculada (si corresponde) y el siguiente padre cuya altura se especifique ;
• Especifique flex-grow: 1a todos los padres directos con la altura calculada (si corresponde) y el elemento para que ocupen todo el espacio restante cuando el tamaño del contenido del elemento sea menor;
• Especificar flex-shrink: 0a todos los elementos de flexión con altura fija para que no se reduzca al tamaño del contenido del elemento es más grande que el tamaño del espacio restante;
• Especifique overflow: hiddena todos los padres directos con altura calculada (si corresponde) para deshabilitar el desplazamiento y prohibir la visualización de contenido desbordado;
• Especificar overflow: autoque el elemento para permitir el desplazamiento en su interior.

JSFiddle (el elemento tiene padres directos con altura calculada)

JSFiddle (caso simple: sin padres directos con altura calculada)

No estoy seguro de que se pueda hacer únicamente con CSS, a menos que se sienta cómodo fingiéndolo con ilusiones. Tal vez use la respuesta de Josh Mein y configúrelo #containerenoverflow:hidden .

Por lo que vale, aquí hay una solución jQuery:

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);