Div desplazable debajo de un encabezado de altura variable

Tengo problemas para corregir el desplazamiento en el elemento de sección. El elemento de sección no se desplaza o se desplaza, pero el contenido o la barra de desplazamiento se quitan de la página.

http://jsbin.com/EBuNonI/1/edit?html,css,output

Idealmente, el encabezado es de altura variable, la sección es la altura máxima del navegador y su contenido se desplaza si es necesario. El cuerpo / página como un todo no debería ser desplazable, solo la sección.

Obviamente, el problema radica en que la sección tiene una altura del 100% ya que se agrega a la altura variable del encabezado. Si quito las secciones al 100% de altura, entonces pierdo el desplazamiento.

• Intentando no usar posicionamiento absoluto / fijo (aplicación móvil) o JS

• Si le doy al encabezado una altura fija (no ideal) y le doy a la sección relleno el fondo igual a la altura fija, a pesar de que el último elemento de la lista es visible, la barra de desplazamiento desaparece de la página.

HTML

 
 
 
 
 
First Item
 
Last Item
 
 
  

CSS

 body, html { height: 100%; } body { margin: 0; padding: 0; overflow: hidden; } .container { height: 100%; } section { height: 100%; overflow-y: scroll; } 

 
 
Navigation Testing Testing Testing Testing
 
 
 
 
First Item
 
3
 
Last Item
 
 
 
  

 *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body, html { height: 100%; } body { margin: 0; padding: 0; overflow: hidden; } .container { height: 100%; width: 30%; display: table; } header { padding: 24px; background: blue; display: table-row; } section { height: 100%; padding: 24px; background: tomato; display: table-row; } section div { overflow-y: scroll; height: 100%; } ul { margin: 0; paddding: 0; }