[Angel Sánchez]

En tu código, no se asigna explícitamente un alto a la clase .caja en el archivo de estilos CSS. Esto se debe a que no se ha especificado ninguna regla para establecer la propiedad height en la clase .caja.

El alto de un elemento se determina automáticamente en función de su contenido, a menos que se especifique lo contrario. En este caso, dado que el contenido de la caja consiste en dos elementos secundarios, el alto de la caja se ajustará automáticamente para abarcar el tamaño de esos elementos. El header y el footer.

Si quieres que tu div caja tenga un alto diferente tienes que asignárselo así:

.caja{
    width: 200px;
    margin: auto;
    height: ALTO DESEADO EN PX;
}