Me gustaría crear un encabezado en la página que no se mueva al desplazar la página.

Esto parece simple, solo agregue "posición: fijo" al estilo, pero luego el contenido aparece debajo del encabezado, porque el encabezado se "elimina del flujo". Entonces, la solución creo que es agregar "margin-top: height" al contenido.

Cuál es la mejor manera de resolver esto cuando la altura del encabezado es variable?

Tengo un violín que demuestra el problema:

http: //jsfiddle.net/waterlooalex/j4Z8F/2

Si la ventana de su navegador no es demasiado grande, el texto del contenido se desplazará debajo del 'encabezado hello world', el problema es que la primera línea de texto "Lorem ipsum ..." está oculta. Tengo algunos comentarios sobre JavaScript eso soluciona el problema.