How to clear the contents of the element "position: fixed" variable height?

Question

I have a headline on a website whose height changes based on many server-side factors. It has been proposed to change the title to a fixed position, so that when the user scrolls the page, the title remains at the top. I use position: fixedto achieve this effect. The problem is that when the title gets too high, it lies on top of the top of the content (even when scrolling to the very top). I can simply apply the top marker to the content of the div to expand it beyond the title, but as mentioned earlier, the value of the field will be very different depending on many factors not available to CSS. Is there an easy way to tell the browser to display a section of content below a fixed level?

I tried to apply clearto the content but did nothing. I know I can do this in Javascript, but I'm looking for a CSS based solution.

Answer 1

I do not think that's possible. When you assign an position: absoluteor to an element position: fixed, it is effectively removed from the document stream and its sizes no longer apply to its siblings.

Answer 2

you can do it easily using javascript

jQuery(document).ready(function() {
    header_height = $("#header").height();
    $("#main-content").css("padding-top", header_height);
});