Encabezado y pie de página con contenido de desplazamiento horizontal en HTML puro y CSS

Estoy intentando crear un diseño usando solo HTML y CSS para no tener la complicación adicional de usar Javascript para hacer el diseño.

El diseño está debajo y consta de tres partes: encabezado, contenido principal y pie de página.

Diseño de muestra

El encabezado y el pie de página deben tener la misma altura y siempre deben estar visibles. En el cambio de tamaño, el encabezado, el contenido y el pie de página deben expandirse / contraerse en consecuencia, con algunas excepciones. Primero, cuando se alcanza una altura máxima en el contenido principal, el contenido principal no debería expandirse más, y en su lugar, el encabezado y el pie de página deberían expandirse. En segundo lugar, cuando se alcanza una altura mínima en el contenido principal, ninguna de las secciones debería contraerse, y la vista debería poder desplazarse.

En cuanto al contenido principal, se puede desplazar horizontalmente con la barra de desplazamiento principal de la ventana gráfica en la parte inferior de la pantalla, mientras que el encabezado y el pie de página deben permanecer en su lugar.

Hasta ahora, he descubierto cómo lograr la parte principal desplazable horizontalmente a través de un div contenedor de posición absoluta que llena toda la ventana, pero parece que no puedo calcular el tamaño vertical de ninguno de los elementos. La única forma en la que puedo pensar es engancharme en el evento de cambio de tamaño, que me gustaría evitar porque se siente raro.

Teniendo en cuenta su problema, solo usaría el encabezado y pie de página de posición fija y luego un simple contenido horizontal div. Vea el violín que hice

El HTML

  
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content

El CSS

 *{ padding:0; margin:0; } html{ overflow-y:hidden; } #header,#footer { width:100%; position:fixed; height:50px; left:0; background:#404040; z-index:9999; } #header{top:0;} #footer{bottom:0;} #content{ position:absolute; background:gray; top:50px; left:0; min-width:100%; bottom:50px; float:left; display:block; width:5000px; /*your content width but 5000 for testing*/ } 

Si quieres escalar el encabezado y el pie de página, puedes usar este violín.

El camino css3
Puedes usar la nueva propiedad css3 flex-box:

Vea el siguiente enlace para un ejemplo

Más información sobre flexbox: Tutsplus

Flex-box es exactamente lo que haría el truco

Pero no será soportado en IE9 …
Todos los nuevos navegadores lo tendrán incluido IE10:
Puedo usar