Div para llenar el 100% de altura del espacio disponible - html, css, css3

Estoy trabajando en una página web que tiene 2 filas principales, la fila superior tiene una altura fija de, por ejemplo, 300px y no cambia.

La fila inferior debe llenar la altura de la vista / pantalla (el resto, si el espacio es posible).

Por favor vea este ejemplo como ejemplo básico: https://wireframe.cc/aUePUH

He intentado ajustar el cuerpo / html al 100% y luego el contenedor de la fila inferior al 100%, haciendo que las 3 columnas en esa fila inferior también tengan el 100% de altura, pero solo parecen ir al 100% del contenido.

idealmente, me gustaría establecer una altura mínima en la fila inferior y luego, para que solo se expanda y se llene la ventana si hay más espacio vertical disponible

Yo también tenía altura: 100vh pero eso no parecía hacerlo.

<div class="container">
<div class="row top-row">
<p>Top Row with a fixed heigh - 300px</p>
</div>

<div class="row bottom-row">
<div class="col-xs-4">
<p>Col 1</p>
<p>
Should fill viewport/avaialable screen height
</p>
</div>

<div class="col-xs-4">
<p>Col 2</p>
<p>
Should fill viewport/avaialable screen height
</p>
</div>

<div class="col-xs-4">
<p>Col 3</p>
<p>
Should fill viewport/avaialable screen height
</p>
</div>
</div>
</div>

top-row {
height: 300px;
background-color: black;
color: white;
margin-bottom: 15px;
}

.bottom-row {
height: 100%;
}

.col-xs-4 {
background-color: red;
color: white;
}

Aquí hay un ejemplo de JS FIDDLE: https://jsfiddle.net/DTcHh/16054/

Respuestas

Aquí hay una solución usando height:calc(); https://jsfiddle.net/DTcHh/16058/

Fue un poco difícil de configurar debido al acolchado de tu cuerpo, pero funciona.

.bottom-row {
height:calc(100vh - 335px);
}

.col-xs-4 {
height:100%;
background-color: red;
color: white;
}

Puedes intentar usar flexbox. Debería poder activar la barra de desplazamiento correctamente en una altura de ventana gráfica más pequeña.

body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.top-row {
flex: 0 0 300px;
background-color: black;
color: white;
margin-bottom: 15px;
}
.bottom-row {
flex: 1;
background-color: red;
color: white;
}

https://jsfiddle.net/3kom9Lo6/