Te traemos la contestación a este atasco, o por lo menos eso deseamos. Si tienes interrogantes deja tu comentario, que para nosotros será un gusto responderte
Solución:
Expandiendo el #down niño para llenar el espacio restante de #container se puede lograr de varias maneras dependiendo de la compatibilidad del navegador que desee lograr y si o no #up tiene una 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%;
grid
grid
grid
grid
grid
grid
flexbox
flexbox
flexbox
flexbox
flexbox
flexbox
calc
calc
calc
calc
calc
calc
overflow
overflow
overflow
overflow
overflow
overflow
Red
CSS grid El diseño 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
Él grid-template-rows define la primera fila como una altura fija de 100 px, 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.
caja flexible
Módulo de diseño de caja flexible de CSS3 (flexbox) ahora cuenta con un buen soporte y puede ser muy fácil de implementar. Debido a que es flexible, incluso funciona cuando #up no tiene una altura definida.
#container display: flex; flex-direction: column;
#down flex-grow: 1;
Es importante tener en cuenta que la compatibilidad con IE10 e IE11 para algunas propiedades de flexbox puede tener errores, y IE9 o inferior no tiene ninguna compatibilidad.
Altura calculada
Otra solución fácil es usar el CSS3 calc unidad funcional, como señala Álvaro en su respuesta, pero requiere que la altura del primer hijo sea un valor conocido:
#up height: 100px;
#down height: calc( 100% - 100px );
Tiene un soporte bastante amplio, con las únicas excepciones notables que son <= IE8 o Safari 5 (sin soporte) e IE9 (soporte parcial). Algunos otros problemas incluyen el uso calcular junto con transformar o sombra de la cajaasí que asegúrese de probar en varios navegadores si eso le preocupa.
Otras alternativas
Si se necesita soporte anterior, puede agregar height:100%; para #down hará que el div rosa sea de altura completa, con una advertencia. Provocará el desbordamiento del contenedor, porque #up lo está empujando hacia abajo.
Por lo tanto, podría agregar overflow: hidden; al contenedor para arreglar eso.
Alternativamente, si la altura de #up está fijo, puede colocarlo absolutamente dentro del contenedor y agregar una parte superior acolchada para #down.
Y, otra opción más sería usar una pantalla de tabla:
#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 acaba de ocurrir 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 posición absoluta).
http://jsfiddle.net/S8g4E/955/
aqui esta 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/
Compatibilidad con 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 afirma que solo el segundo niño debe tener su altura no especificada, por lo que creo que debería encontrar esto aceptable.
html
Text
Text
Text
Text
Text
Text
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/
Finalizando este artículo puedes encontrar las notas de otros creadores, tú además eres capaz dejar el tuyo si te gusta.