Вытеснение из-под fixed

Имеется страница, состоящая из двух основных блоков (.header и .main). У блока .header установлен position: fixed
Проблема состоит в том, что блок .main впадает в блок .header. Т.е. заезжает под блок .header
body { margin: 5px; } .header { position: fixed; left: 5px; right: 5px; top: 5px; height: 48px; background-color: white; box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red; } .main { height: 120px; background-color: white; box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue; }

Эту задачу можно решить, добавив ещё один блок такой же высоты, как и .header. Но это не подойдёт, так как в течении всего времени .header может изменять свою высоту (с помощью скрипта, изменением ширины и т. д.). При этом .main так же должен оставаться под .header, а он снова впадёт.
$(function() { var $header = $('.header'); setInterval(function() { $header.animate({height: 96 + 'px'}, 400); setTimeout(function() { $header.animate({height: 48 + 'px'}, 400); }, 800); setTimeout(function() { $header.css({height: 'auto'}).animate({right: 80 + '%'}, 400); setTimeout(function() { $header.animate({right: 5 + 'px'}, { duration: 400, complete: function() { $header.css({height: 48 + 'px'}) } }); }, 800); }, 2600); }, 5200); }); body { margin: 5px; } .header { position: fixed; left: 5px; right: 5px; top: 5px; height: 48px; background-color: white; box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red; } .main { height: 120px; background-color: white; box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue; } .displacer { height: 48px; background-color: white; box-shadow: inset 2px 2px 0px green, inset -2px 2px 0px green, inset 2px -2px 0px green, inset -2px -2px 0px green; visibility: hidden; }

В общем, вот:
.header может изменять размер, но при этом, .main всё равно должен оставаться под ним. .header должен оставаться на своём месте - сверху страницы с position: fixed
Как решить данный вопрос?

Ответ

Создайте точно такой же элемент только добавьте ему position: static; и visibility: hidden; (что позволит занимать нужное место, но не отображать элемент).
.a, .b { width: 100%; height: 20px; } .a { background: red; position: absolute; } .b { background: blue; } .a-clone { position: static; }

Я не должен быть под красным блоком :с

Те же вещи можно делать и с помощью Javascript и также задавать этому "клону" нужные margin при необходимости (для соответствующих значений top и left абсолютно позиционированного элемента).
Обновление
Если содержимое блока будет динамически меняться, то можно с помощью Javascript добавить обработчик изменения размеров самого блока, где присваивать новые значения размеров блока "клону" блока со статическим поционированием.