Как очистить содержимое элемента «position: fixed» переменной высоты?

Question

У меня есть заголовок на веб-сайте, высота которого изменяется в зависимости от многих серверных факторов. Было запрошено, чтобы заголовок был изменен, чтобы иметь фиксированную позицию, чтобы, когда пользователь прокручивал страницу, заголовок оставался вверху. Я использую position: fixed для достижения этого эффекта. Проблема в том, что когда заголовок становится слишком высоким, он накладывается поверх некоторого содержимого (даже при прокрутке до самого верха). Я могу просто применить верхнее поле к содержимому div, чтобы расширить его за заголовок, но, как упоминалось ранее, значение поля будет сильно различаться в зависимости от многих факторов, недоступных CSS. Есть ли простой способ заставить браузер отображать раздел содержимого ниже фиксированного слоя?

Я пытался применить clear к контенту, но ничего не сделал. Я знаю, что могу сделать это в Javascript, но я ищу решение на основе CSS.

Answer 1

Я не думаю, что это возможно.Когда вы присваиваете элементу position: absolute или position: fixed, он фактически удаляется из потока документа и его размеры больше не относятся к его родным элементам.

Answer 2

Вы можете сделать это легко, используя JavaScript

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