¿Cómo forzar que el div hijo sea el 100% de la altura del div padre sin especificar la altura del padre?

NOTA: Esta respuesta es aplicable a los navegadores antiguos sin soporte para el estándar Flexbox. Para un enfoque moderno, véase: https://stackoverflow.com/a/23300532/1155721

Te sugiero que eches un vistazo a Columnas de igual altura con CSS para todos los navegadores y sin trucos.

Básicamente, hacer esto con CSS de forma compatible con los navegadores no es trivial (pero sí lo es con las tablas), así que búscate una solución preempaquetada adecuada.

Además, la respuesta varía en función de si quieres una altura del 100% o una altura igual. Por lo general, es la misma altura. Si se trata de una altura del 100%, la respuesta es ligeramente diferente.

Si no le importa que el div de navegación sea recortado en caso de un div de contenido inesperadamente corto, hay al menos una manera fácil:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

De lo contrario, existe la técnica de

[Refiriéndose al código de Dmity's Less en otra respuesta] ¿Supongo que esto es algún tipo de "pseudocódigo"?

Por lo que tengo entendido, intente utilizar la técnica de las falsas columnas, que debería funcionar.

http://www.alistapart.com/articles/fauxcolumns/

Espero que esto ayude :)