Diseño fluido de altura completa con campo de texto editable

He estado reflexionando sobre este enigma durante años, y no puedo creer que un diseño tan simple no se resuelva con una simple pieza de html + css. Así que te lo pasaré este fin de semana 😉

Resultado deseado

(modelo mental: notepad.exe …)

+---------------------------------------------------+ | height depends on static content. | | This Part always stays visible. | +---------------------------------------------------+ | height exactly fills up remaining height. | | this part (ONLY!) scrolls if content is longer! | | (this part will be contenteditable) | +---------------------------------------------------+ | height depends on static content. | | This Part always stays visible. | +---------------------------------------------------+ 

Requisitos:

  • no javascript (porque esa es mi solución insatisfactoria actual)
  • puro CSS + HTML
  • como compatible con varios navegadores y graciosamente degradable como sea posible (¡sin flexbox!)
  • La altura del encabezado y pie de página es desconocida ( esto lamentablemente no funcionará).

¿Cómo puedo hacerlo?

Puede que no te guste la respuesta, pero la única forma que conozco de cumplir con todos tus criterios es mediante el uso de una tabla para el diseño.

HTML

 
Header goes here
Content goes here.

CSS

La tabla ocupa toda la ventana gráfica:

 .layout { position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; } 

Como la mesa tiene una altura del 100%, estirará todas las filas según sea necesario para alcanzar la altura. Este estilo evita que estire las filas de encabezado y pie de página:

 .header, .footer { height: 0px; } 

Este estilo es necesario solo para Firefox:

 tr { height: 100%; } 

En todos los navegadores excepto IE, este estilo funciona en el td . Lo puse en un div para que funcione con IE:

 .container { position: relative; height: 100%; } 

Ahora que tenemos un contenedor con un posicionamiento relativo, podemos aplicar un posicionamiento absoluto con un 100% de altura y desbordamiento en su contenido:

 .content { overflow: auto; position: absolute; height: 100%; } 

Probado en IE11, Chrome, Firefox, Opera y Safari.

Violín