Si hallas algún problema en tu código o trabajo, recuerda probar siempre en un ambiente de testing antes añadir el código al proyecto final.
Solución:
Puede usar CSS Flexbox en lugar de otro valor de visualización. El módulo Flexbox Layout (Flexible Box) tiene como objetivo proporcionar una forma más eficiente de diseñar, alinear y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido o dinámico.
Ejemplo
/* CONTAINER */
#wrapper
width:300px;
height:300px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
/* SOME ITEM CHILD ELEMENTS */
#first
width:300px;
height: 200px;
background-color:#F5DEB3;
#second
width:300px;
background-color: #9ACD32;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, */
jsfiddle Ejemplo
Si desea tener soporte completo para navegadores antiguos como IE9 o inferior, tendrá que usar polyfills como flexy, este polyfill habilita el soporte para el modelo Flexbox pero solo para la especificación 2012 del modelo flexbox.
Hace poco encontre otro polyfill para ayudarte con Internet Explorer 8 & 9 o cualquier navegador antiguo que no tenga soporte para modelo flexbox, aun no lo he probado pero te dejo el link aqui
Puede encontrar una guía útil y completa del modelo Flexbox de Chris Coyer aquí
Solución de caja flexible
html, body
height: 100%;
.wrapper
display: flex;
flex-direction: column;
width: 300px;
height: 100%;
.first
height: 50px;
.second
flex-grow: 1;
First
Second
Puedes hacer esto con position:absolute; sobre el #second div así:
VIOLÍN
CSS:
#wrapper
position:relative;
#second
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
EDITAR: solución alternativa
Dependiendo de su diseño y el contenido que tenga en esos divs, podría hacerlo mucho más simple y con menos marcado como este:
VIOLÍN
html:
CSS:
#wrapper
height:100%;
width:300px;
background-color:#9ACD32;
#first
background-color:#F5DEB3;
height: 200px;