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;}