¿Cómo hacer un cuadro de texto de la misma altura que la ventana?

Quiero hacer un cuadro de texto que tenga la misma altura que la página. Por ahora, solo puedo hacer que tenga la misma altura que el contenido que tengo dentro del cuadro de texto. No sé si simplemente no he encontrado la manera adecuada de describirlo con css o si es mi plugin jQuery el que lo enreda.

Puedo darle relleno-superior / inferior que aumenta la altura del cuadro de texto, pero si le doy demasiado relleno, el texto se empuja hacia abajo.

Al texto dentro del cuadro se le ha dado la clase ‘text-content’ y le he aplicado el siguiente css:

.text-content{ margin: auto; width:40%; font-family: 'Open Sans', sans-serif; background-color: rgba(213,213,213,0.5); padding-left: 10px; padding-right: 10px; } 

Ejemplo aquí

Usando CSS3, eso se logra fácilmente definiendo una height de 100vh .

 .text-content { margin: auto; width: 40%; font-family: 'Open Sans', sans-serif; background-color: rgba(213,213,213,0.5); padding-left: 10px; padding-right: 10px; height: 100vh; } 

JSFiddle: http://jsfiddle.net/3uczbe0s/

Esto no tiene en cuenta el border del cuadro y el margin del body , cuyos valores predeterminados son 1px y 8px , respectivamente. Esto significa que usar 100vh obligará a la página a desplazarse. Puede compensar fácilmente .text-content cero el border de .text-content y margin of body .

La única otra opción es usar una secuencia de comandos para manipular su altura, que también sería compatible con versiones anteriores.