How to clear content from a "position: fixed" element of variable height?

Question

I have a header on a web site, the height of it changes based on many server-side factors. It has been requested that the header be modified to have fixed position, so that when the user scrolls the page, the header remains at the top. I am using position: fixed to achieve this effect. The problem is that when the header becomes too tall, it lays over the top of some of the content (even when scrolled all the way to the top). I can just apply a top-margin to the content div to extend it past the header, but as mentioned earlier the value of the margin will vary greatly based on many factors not available to CSS. Is there an easy way to tell the browser to render a section of content below a fixed layer?

I have tried applying a clear to the content, but that didn't do anything. I know I could do this in Javascript, but I am looking for a CSS-based solution.

Answer 1

I don't think it's possible. When you assign position: absolute or position: fixed to an element, it is effectively removed from the flow of the document and it's dimensions are no longer relevant to its siblings.