Создание «фиксированного» заголовка переменной высоты в CSS с прокручиваемым содержимым

Я бы хотел создать на странице заголовок, который не перемещается при прокрутке page.

Это кажется простым, просто добавьте к стилю «position: fixed», но тогда содержимое появится под заголовком, потому что заголовок «удален из потока». Поэтому я думаю, что решение состоит в том, чтобы добавить к содержимому "margin-top: height".

Как лучше всего решить эту проблему при переменной высоте заголовка?

У меня есть скрипка, демонстрирующая проблему:

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

Если окно вашего браузера не слишком велико, текст содержимого будет прокручиваться под заголовком "hello world header", проблема в том, что первая строка текста "Lorem ipsum ..." скрыта. У меня есть комментарий вне javascript, который помогает решить эту проблему.