Creating a variable height "fixed" header in CSS with scrollable content

Question

I'd like to create a header on the page that doesn't move when you scroll the page.

This seems simple, just add "position: fixed" to the style, but then the content appears underneath the header, because the header is "removed from the flow". So the solution I think is to add "margin-top: height" to the content.

Whats the best way to solve this when the height of the header is variable?

I've got a fiddle that demonstrates the problem:

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

Providing your browser window is not too large, the content text will scroll below the 'hello world header', the problem is that the first line of text "Lorem ipsum...' is hidden. I've got some comment out javascript that works around the issue.

Answer 1

You could add a second copy of the header div that's not fixed and use something like visibility:hidden on it. That way it pushes the content down to the exact spot you need, but without using JavaScript. Kinda hackish but I tried it in your fiddle and it works.